jQuery remove options from select

Question

I have a page with 5 selects that all have a class name 'ct'. I need to remove the option with a value of 'X' from each select while running an onclick event. My code is:

$(".ct").each(function() {
    $(this).find('X').remove();
   });

Where am I going wrong?

Answer 1

Try this:

$(".ct option[value='X']").each(function() {
    $(this).remove();
});

Or to be more terse, this will work just as well:

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

Answer 2

$('.ct option').each(function() {
    if ( $(this).val() == 'X' ) {
        $(this).remove();
    }
});

Or just

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

Main point is that find takes a selector string, by feeding it x you are looking for elements named x .

Answer 3

find() takes a selector, not a value. This means you need to use it in the same way you would use the regular jQuery function ( $('selector') ).

Therefore you need to do something like this:

$(this).find('[value="X"]').remove();

See the jQuery find docs.

Answer 4

它适用于选项标签或文本字段：

$("#idname option[value='option1']").remove();

Answer 5

if your dropdown is in a table and you do not have id for it then you can use the following jquery:

var select_object = purchasing_table.rows[row_index].cells[cell_index].childNodes[1];
$(select_object).find('option[value='+site_name+']').remove();

Answer 6

For jquery < 1.8 you can use :

$('#selectedId option').slice(index1,index2).remove()

to remove a especific range of the select options.

Answer 7

When I did just a remove the option remained in the ddl on the view, but was gone in the html (if u inspect the page)

$("#ddlSelectList option[value='2']").remove(); //removes the option with value = 2
$('#ddlSelectList').val('').trigger('chosen:updated'); //refreshes the drop down list

Answer 8

Iterating a list and removing multiple items using a find. Response contains an array of integers. $('#OneSelectList') is a select list.

$.ajax({
    url: "Controller/Action",
    type: "GET",
    success: function (response) {
        // Take out excluded years.
        $.each(response, function (j, responseYear) {
            $('#OneSelectList').find('[value="' + responseYear + '"]').remove();
        });
    },
    error: function (response) {
        console.log("Error");
    }
});

Answer 9

I tried this code:

$("#select-list").empty()

Answer 10

If no id or class were available for the option values, one can remove all the values from dropdown as below

$(this).find('select').find('option[value]').remove();

Answer 11

Try this for remove the selected

$('#btn-remove').click(function () {
    $('.ct option:selected').each(function () {
        $(this).remove();
    });
});

Answer 12

Something that has quickly become my favorite thing to do with removing an option is not to remove it at all. This method is beneficial for those who want to remove the option but might want to re-add it later, and make sure that it's added back in the correct order.

First, I actually disable that option.

$("#mySelect").change(
    function() {

        $("#mySelect").children('option[value="' + $(this).val() + '"]').prop("disabled", true);

        $("#re-addOption").click(
            function() {
                $("#mySelect").children('option[value="' + howeverYouStoredTheValueHere + '"]').prop("disabled", false);
            }
        );
    }
);

and then to clean up, in my CSS, I set disabled option s to be hidden, because hiding an option in some browsers doesn't work, but using the method above, clients with those browsers wont be able to select the option again.

select option[disabled] {
    display: none;
}

Personally, on the re-addOption element, I have a custom property of data-target="value" , and in place of howeverYouStoredTheValueHere , I use $(this).attr('data-target') .

Answer 13

To remove all Options

$(".select").empty();

To remove all Options and add a blank option

$(".select").empty().append(new Option('--Select--',''));