I need to delete an option from a select in certain circumstances.
Basically:
if(mystatement == true)
{
//remove item with id 'option1' from select of id 'select1'
}
Anyone know the code for me to achieve this?
Many thanks.
Add a comment
|
4 Answers
Remove by Value:
$("#select1 option[value=1]").remove();
Remove by Text:
$("#select1 option:contains(Text)").remove();
1 Comment
David Spence
For text,
contains seems like a bad idea, no? Any reason why not to use $("#select1 option:[text='My Text']") ?Edit
Since id is unique in the document no need to relate it to the parent select element. You can do simply
$("#option1").remove();
Comments
jQuery:
$("#option1").remove();
or
$("#select").remove("#option1");
And the classic javascript method:
var option1 = document.getElementById("option1");
document.getElementById("select1").removeChild(option1);
2 Comments
Marko Dumic
$("#select1") is unnecessary. $("#option1").remove() will suffice since it is matched by id.
Andy E
@Marko: I was editing that in as you posted your comment :-) I left the original in as adding IDs to option tags is fairly uncommon.
I have seen many people with this problem. I have created this script that could be useful. Hope you like it:
var robable = {
init: function() {
robable.get_selected_option_from_select();
},
get_selected_option_from_select: function() {
$(".robable").off().on("change", function() {
if ($(this).val() !== "") {
robable.add_to_list($(this));
}
});
},
remove_option_from_select: function(select_id, value) {
$("#" + select_id + " option[value='" + value + "']").remove();
},
add_option_to_select: function(select_id, value, text) {
$('#' + select_id).append('<option value="' + value + '">' + text + '</option>');
},
add_to_list: function(select) {
option_text = $(".robable option[value='" + select.val() + "']").text();
//Add to list
$('#list').append("<li data-value='" + select.val() + "' data-text='" + option_text + "'><a href='#' class='filter-remove' data-parent-id='" + select.attr("id") + "'>Delete</a> " + option_text + "</li>");
robable.remove_from_list();
//Remove from select
robable.remove_option_from_select(select.attr("id"), select.val());
},
remove_from_list: function() {
$(".filter-remove").off().on("click", function() {
var select_id = $(this).data('parent-id');
var option_value = $(this).closest("li").data('value');
var option_text = $(this).closest("li").data('text');
//Add to select
robable.add_option_to_select(select_id, option_value, option_text);
//Remove from list
$(this).closest("li").remove();
});
}
};
robable.init();<!DOCTYPE html>
<html>
<head>
<title>Select Robables</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<ul id="list"></ul>
</body>
</html>