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

JqueryDrop Down-Menu

Jquery 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');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionArnkrishnView Question on Stackoverflow
Solution 1 - JqueryYaakov ShohamView Answer on Stackoverflow
Solution 2 - JqueryE CiottiView Answer on Stackoverflow
Solution 3 - JqueryRaj KumarView Answer on Stackoverflow
Solution 4 - JqueryMahmoodView Answer on Stackoverflow
Solution 5 - JqueryPawprintView Answer on Stackoverflow
Solution 6 - JqueryAshish MauryaView Answer on Stackoverflow
Solution 7 - JqueryVickyView Answer on Stackoverflow