jQuery remove options from select
JavascriptJqueryHtml SelectJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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();
Solution 2 - Javascript
$('.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
.
Solution 3 - Javascript
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.
Solution 4 - Javascript
It works on either option tag or text field:
$("#idname option[value='option1']").remove();
Solution 5 - Javascript
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();
Solution 6 - Javascript
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");
}
});
Solution 7 - Javascript
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();
Solution 8 - Javascript
For jquery < 1.8 you can use :
$('#selectedId option').slice(index1,index2).remove()
to remove a especific range of the select options.
Solution 9 - Javascript
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
Solution 10 - Javascript
I tried this code:
$("#select-list").empty()
Solution 11 - Javascript
Try this for remove the selected
$('#btn-remove').click(function () {
$('.ct option:selected').each(function () {
$(this).remove();
});
});
Solution 12 - Javascript
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')
.