77
votes

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

7

7 Answers

166
votes

$("option[value='foo']").remove();

or better (if you have few selects in the page):

$("#select_id option[value='foo']").remove();

24
votes

Once you have localized the dropdown element

dropdownElement = $("#dropdownElement");

Find the <option> element using the JQuery attribute selector

dropdownElement.find('option[value=foo]').remove();
4
votes
$('#id option').remove();

This will clear the Drop Down list. if you want to clear to select value then $("#id option:selected").remove();

1
votes

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();
0
votes

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.

0
votes

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.

-1
votes

First find the class name for particular select.

$('#id').val('');
$('#selectoptionclassname').selectpicker('refresh');