Select Page

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.

Last Updated On March 21, 2018

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.