jQuery provides some interesting methods that would help remove or add items (options) in the select element. You can either remove all the items or remove specific (single) item. Similarly, you can add multiple items to an existing list or remove all the items and add a fresh list of items.
Note: I have added the markup section in the first example only. Remaining examples uses the same markup, however, with different scripts.
1) Remove All Select Options
Let us assume, I have a list of books in an HTML5 <select> element and with click of a button, I wish to remove all the options from the list.
<html>
<head>
<title>Remove All Select Options using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<p>Click the “Remove All” button to remove all items in the Dropdown list!</p>
<select id="selBooks" name="books" style="font:14px Verdana;">
<option value=""></option>
<option value="Stategies Unplugged">Stategies Unplugged</option>
<option value="jQuery Reference">jQuery Reference</option>
<option value="HTML5 Fundamentals">HTML5 Fundamentals</option>
<option value="Popular Science">Popular Science</option>
</select>
<input type="submit" id="submit" value="Remove All" />
</body>
<script>
$(document).ready(function () {
$("#submit").click(function () {
$('#selBooks')
.find('option')
.remove();
});
});
</script>
</html>The jQuery .find() method will find the <option> tags in the <select> element. The <option> tag confirms that the select element has values or items in it. Therefore, first we will find the options. The second method .remove() will remove all the options in the select element.
2) Remove a Specific Select Option
You can remove a specific option from the list, using jQuery .remove() method. However, you have to specify the name of the option. For example, I want to remove the option HTML5 Fundamentals from the list.
<script>
$(document).ready(function () {
$("#submit").click(function () {
$('#selBooks option[value="HTML5 Fundamentals"]').remove();
});
});
</script>3) Remove All Options but One
To do this, I’ll use the above statement with a != (not equal to) sign.
<script>
$(document).ready(function () {
$("#submit").click(function () {
$('#selBooks option[value!="jQuery Reference"]').remove();
});
});
</script>4) Add a New Option or Item to the List
To add new options (or items) in the select list, I’ll use jQuery .append() method. Read more about .append() method. Using this method, you can add a new option at the end of the list.
<script>
$(document).ready(function () {
$("#submit").click(function () {
$('#selBooks')
.append('<option value="Hunger Games">Hunger Games</option>')
});
});
</script>5) Add New Options after Removing Previous Options
This is another scenario where I wish to remove all the previous (default) options and add new set of options (items) in the <select> element.
<script>
$("#submit").click(function () {
$('#selBooks')
.find('option')
.remove()
.end()
.append('<option value="-Select-">-Select-</option>')
.append('<option value="UX Design">Smashing UX Design</option>')
.append('<option value="jQuery UI">jQuery UI</option>')
});
</script>Ref: Read more about .end() method
Once it removes all the options in the list using .remove() method, the .end() would take the object back to the beginning of the script, that is, at #selBooks and start adding new options using .append() method. Now, understand the flow using .end().
#selBooks -> Remove Options -> Revert Back to #selBooks -> Add New Options
Without the .end() method, it would remove all the options from the select element and it would simply bail out.
We have learnt about how to add and remove multiple or just one specific option from a <select> element. In the process, we have learned about few important jQuery methods, such as, .find(), .remove(), .append() and .end(). You must be now eager to explore more using these simple yet useful methods in your applications. If you have found something new, do not hesitate to share it with us here.
Thanks for reading ☺.