How to remove all options within a Html select box using JQuery

H

How Can We Help?

How to remove all options within a Html select box using JQuery

You have a html select box “combo box”  

<select id="selectBox">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

In order to remove all items using JQuery use the JQuery empty function

$('#selectBox').empty();

Replace selectBox with the relevant id for the select box

If you wish to empty the select box and add a single option to the select box, use JQuery’s append function together with the empty function

$('#selectBox').empty().append('<option>New Option</option>');

This will add the New Option to the select box.

About the author

Ian Carnaghan

I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.

About Author

Ian Carnaghan

I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.

Follow Me