How to remove a selected item from a dropdown list (Using Jquery).

Question

Hi, How to remove one or more selected items in option tag, from a HTML dropdown list (Using Jquery).

For removing entire options from a combo box we can use the below Jquery statement.

$("#cmbTaxIds >option").remove();

Assuming the below HTML code in aspx file.

            <select id="cmbTaxID" name="cmbTaxID" style="width: 136px; display: none" tabindex="10" disabled="disabled">
                <option value="0"></option>
                <option value="3"></option>
                <option value="1"></option>
            </select>

If I want to remove only the middle value, then what should be the syntax for the same (using Jquery)?

Answer 1

Use the eq selector.

var index = $('#cmbTaxID').get(0).selectedIndex;
$('#cmbTaxID option:eq(' + index + ')').remove();

This is the best way to do it because it's index-based, not arbitrary value-based.

Answer 2

$("#cmbTaxIds >option[value='3']").remove();

Just replace 3 with the value of the element you want to remove.

Answer 3

A more generic answer to remove the selected option could be

$('#somebutton').click(function(){
    var optionval = $('#cmbTaxIds').val();
    $('#cmbTaxIds > option[value=' + optionval + ']').remove();

})

Answer 4

something like this:

$('#cmbTaxID option:selected').remove();

or even shorter:

$('#cmbTaxID :selected').remove();