How do I remove items from, or add items to, a select box? I'm running jQuery, should that make the task easier. Below is an example select box.
<select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select> Remove an option:
$("#selectBox option[value='option1']").remove();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select>Add an option:
$("#selectBox").append('<option value="option5">option5</option>');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select>
You can delete the selected item with this:
$("#selectBox option:selected").remove(); This is useful if you have a list and not a dropdown.
window.onload = function () { var select = document.getElementById('selectBox'); var delButton = document.getElementById('delete'); function remove() { value = select.selectedIndex; select.removeChild(select[value]); } delButton.onclick = remove; } To add the item I would create second select box and:
var select2 = document.getElementById('selectBox2'); var addSelect = document.getElementById('addSelect'); function add() { value1 = select2.selectedIndex; select.appendChild(select2[value1]); } addSelect.onclick = add; Not jQuery though.
To Remove an Item
$("select#mySelect option[value='option1']").remove(); To Add an item
$("#mySelect").append('<option value="option1">Option</option>'); To Check for an option
$('#yourSelect option[value=yourValue]').length > 0; To remove a selected option
$('#mySelect :selected').remove(); This should do it:
$('#selectBox').empty(); I find the jQuery select box manipulation plugin useful for this type of thing.
You can easily remove an item by index, value, or regex.
removeOption(index/value/regex/array[, selectedOnly]) Remove an option by - index: $("#myselect2").removeOption(0); - value: $("#myselect").removeOption("Value"); - regular expression: $("#myselect").removeOption(/^val/i); - array $("#myselect").removeOption(["myselect_1", "myselect_2"]); To remove all options, you can do $("#myselect").removeOption(/./);.
Adding/Removing value dynamically without hard-code:
// remove value from select dynamically
$("#id-select option[value='" + dynamicVal + "']").remove(); // Add dynamic value to select
$("#id-select").append('<option value="' + dynamicVal + '">' + dynamicVal + '</option>'); I found two pages that seem helpful, it's written for ASP.Net, but the same stuff should apply:
Just to augment this for anyone looking, you are also able to just:
$("#selectBox option[value='option1']").hide(); and
$("#selectBox option[value='option1']").show(); 
function removeOptionsByValue(selectBox, value) { for (var i = selectBox.length - 1; i >= 0; --i) { if (selectBox[i].value == value) { selectBox.remove(i); } } } function addOption(selectBox, text, value, selected) { selectBox.add(new Option(text, value || '', false, selected || false)); } var selectBox = document.getElementById('selectBox'); removeOptionsByValue(selectBox, 'option3'); addOption(selectBox, 'option5', 'option5', true);<select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select>jQuery(function($) { $.fn.extend({ remove_options: function(value) { return this.each(function() { $('> option', this) .filter(function() { return this.value == value; }) .remove(); }); }, add_option: function(text, value, selected) { return this.each(function() { $(this).append(new Option(text, value || '', false, selected || false)); }); } }); }); jQuery(function($) { $('#selectBox') .remove_options('option3') .add_option('option5', 'option5', true); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select>I had to remove the first option from a select, with no ID, only a class, so I used this code successfully:
$('select.validation').find('option:first').remove(); 
$("#selectBox option[value='option1']").remove(); $("#selectBox").append('<option value="option1">Option</option>'); when you want to totally remove and add option from select box then you can use this code <select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select> $("#selectBox option[value='option1']").hide(); $("#selectBox option[value='option1']").show();sometime we need to hide and show option from select box , but not remove then you can use this code <select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select>$('#selectBox :selected').remove(); $("#selectBox option:selected").remove();sometime need to remove selected option from select box then <select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select>('#selectBox').empty();when you need to remove all option then this code <select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select>$('#selectBox').find('option:first').remove(); $('#selectBox').find('option:last').remove();when need to first option or last then this code <select name="selectBox" id="selectBox"> <option value="option1">option1</option> <option value="option2">option2</option> <option value="option3">option3</option> <option value="option4">option4</option> </select>I just want to suggest another way to add an option. Instead of setting the value and text as a string one can also do:
var option = $('<option/>') .val('option5') .text('option5'); $('#selectBox').append(option); This is a less error-prone solution when adding options' values and texts dynamically.
If somebody need delete ALL options inside a select, i did a litle function.
I hope you find it useful
var removeAllOptionsSelect = function(element_class_or_id){ var element = $(element_class_or_id+" option"); $.each(element,function(i,v){ value = v.value; $(element_class_or_id+" option[value="+value+"]").remove(); }) } Only have to run
removeAllOptionsSelect("#contenedor_modelos"); 
$('#contenedor_modelos').empty(); ? Nice to see some action though :)Perhaps someone else will need one elementary way to clear the select:
document.getElementById(SELECT_ID).innerHTML = ""; 