jQuery to remove an option from drop down list, given option's text/value
JqueryDrop Down-MenuJquery Problem Overview
I have a drop down list and would like to remove an option from it, given the text/value of that particular option. Is it possible using jQuery? Just like 'append' which adds an option to the drop down list, is there a function to remove an option?
I tried searching for it but all I got were examples where the entire set of options in the drop down list are removed, which is not what I seek.
cheers
Jquery Solutions
Solution 1 - Jquery
$("option[value='foo']").remove();
or better (if you have few selects in the page):
$("#select_id option[value='foo']").remove();
Solution 2 - Jquery
Once you have localized the dropdown element
dropdownElement = $("#dropdownElement");
Find the <option>
element using the JQuery attribute selector
dropdownElement.find('option[value=foo]').remove();
Solution 3 - Jquery
$('#id option').remove();
This will clear the Drop Down list. if you want to clear to select value then $("#id option:selected").remove();
Solution 4 - Jquery
I know it is very late but following approach can also be used:
<select id="type" name="type" >
<option value="Permanent" id="permanent">I am here to stay.</option>
<option value="toremove" id="toremove">Remove me!</option>
<option value="Other" id="other">Other</option>
</select>
and if I have to remove second option (id=toremove), the script would look like
$('#toremove').hide();
Solution 5 - Jquery
I have used the above option to .hide entries from 2 drops down boxes (first you select the city, then you selected the area within that city). It works fine on screen but the hidden options are still selectable via keyboard inputs.
Solution 6 - Jquery
Many people had difficulty in using this keyword when we have iteration of Drop-downs with same elements but different values or say as Multi line data in USER INTERFACE. : Here is the code snippet : $(this).find('option[value=yourvalue]');
Hope you got this.
Solution 7 - Jquery
First find the class name for particular select.
$('#id').val('');
$('#selectoptionclassname').selectpicker('refresh');