[jquery] jQuery to remove an option from drop down list, given option's text/value

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

This question is related to jquery drop-down-menu

The answer is


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.


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.


$('#id option').remove();

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


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

First find the class name for particular select.

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

Once you have localized the dropdown element

dropdownElement = $("#dropdownElement");

Find the <option> element using the JQuery attribute selector

dropdownElement.find('option[value=foo]').remove();