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

Question

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

something like this:

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

or even shorter:

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