I have the following in the page
<select name="val" size="1" > <option value="A">Apple</option> <option value="C">Cars</option> <option value="H">Honda</option> <option value="F">Fiat</option> <option value="I">Indigo</option> </select> I would like to remove certain values from my select if certain conditions are true.
E.g
if(frm.product.value=="F"){ // remove Apple and Cars from the select list } How can I do this using javascript
Give an id for the select object like this:
<select id="mySelect" name="val" size="1" > <option value="A">Apple</option> <option value="C">Cars</option> <option value="H">Honda</option> <option value="F">Fiat</option> <option value="I">Indigo</option> </select> You can do it in pure JavaScript:
var selectobject = document.getElementById("mySelect"); for (var i=0; i<selectobject.length; i++) { if (selectobject.options[i].value == 'A') selectobject.remove(i); } But - as the other answers suggest - it's a lot easier to use jQuery or some other JS library.
for (var i=0; i<selectobject.length; i++){ here variable deceleration should be 1 not the 0 and 0 is not an index.
with pure javascript
var condition = true; // your condition if(condition) { var theSelect = document.getElementById('val'); var options = theSelect.getElementsByTagName('OPTION'); for(var i=0; i<options.length; i++) { if(options[i].innerHTML == 'Apple' || options[i].innerHTML == 'Cars') { theSelect.removeChild(options[i]); i--; // options have now less element, then decrease i } } } not tested with IE (if someone can confirm it...)
theSelect.getElementsByTagName('OPTION'), you can use theSelect.options instead.Check the JQuery solution here
$("#selectBox option[value='option1']").remove(); As some mentioned the length of the select element decreases when removing an option. If you just want to remove one option this is not an issue but if you intend to remove several options you could get into problems. Some suggested to decrease the index manually when removing an option. In my opinion manually decreasing an index inside a for loop is not a good idea. This is why I would suggest a slightly different for loop where we iterate through all options from behind.
var selectElement = document.getElementById("selectId"); for (var i = selectElement.length - 1; i >= 0; i--){ if (someCondition) { selectElement.remove(i); } } If you want to remove all options you can do something like this.
var selectElement = document.getElementById("selectId"); while (selectElement.length > 0) { selectElement.remove(0); } The index I will change as soon as it removes the 1st element. This code will remove values 52-140 from wifi channel combo box
obj = document.getElementById("id"); if (obj) { var l = obj.length; for (var i=0; i < l; i++) { var channel = obj.options[i].value; if ( channel >= 52 && channel <= 140 ) { obj.remove(i); i--;//after remove the length will decrease by 1 } } } 
To remove options in a select by value I would do (in pure JS) :
[...document.getElementById('val').options] .filter(o => o.value === 'A' || o.value === 'C') .forEach(o => o.remove()); 
[...document.getElementById('val').options].filter(o => o.value === 'F')[0].remove();If you are using JQuery, it goes as follows:
Give an ID to your SELECT
<select name="val" size="1" id="val"> <option value="A">Apple</option> <option value="C">Cars</option> <option value="H">Honda</option> <option value="F">Fiat</option> <option value="I">Indigo</option> </select> $("#val option[value='A'],#val option[value='C']").remove(); 
if(frm.product.value=="F"){ var select = document.getElementsByName('val')[0]; select.remove(0); select.remove(1); } This should do it
document.getElementsByName("val")[0].remove(0); document.getElementsByName("val")[0].remove(0); Check the fiddle here
You may use:
if ( frm.product.value=="F" ){ var $select_box = $('[name=val]'); $select_box.find('[value=A],[value=C]').remove(); } Update: If you modify your select box a bit to this
<select name="val" size="1" > <option id="A" value="A">Apple</option> <option id="C" value="C">Cars</option> <option id="H" value="H">Honda</option> <option id="F" value="F">Fiat</option> <option id="I" value="I">Indigo</option> </select> the non-jQuery solution would be this
if ( frm.product.value=="F" ){ var elem = document.getElementById('A'); elem.parentNode.removeChild(elem); var elem = document.getElementById('C'); elem.parentNode.removeChild(elem); } You have to go to its parent and remove it from there in javascript.
"Javascript won't let an element commit suicide, but it does permit infanticide"..:)
try this,
var element=document.getElementsByName(val)) element.parentNode.removeChild(element.options[0]); // to remove first option Alternatively you can also accomplish this with getElementsByName
<select id="mySelect" name="val" size="1" > <option value="A">Apple</option> <option value="C">Cars</option> <option value="H">Honda</option> <option value="F">Fiat</option> <option value="I">Indigo</option> </select> So in matching on the option value of "C" we could remove Cars from the list.
var selectobject = document.getElementsByName('val')[0]; for (var i=0; i<selectobject.length; i++){ if (selectobject.options[i].value == 'C' ) selectobject.remove(i); } For clear all options en Important en FOR : remove(0) - Important: 0
var select = document.getElementById("element_select"); var length = select.length; for (i = 0; i < length; i++) { select.remove(0); // or // select.options[0] = null; } The best answer is this
function f1(){ var r=document.getElementById('ms'); for(i=0;i<r.length;i++) if(r.options[i].selected==true) { r.remove(i); i--; } }<select id="ms" size="5" multiple="multiple"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> <option>F</option> </select> <input type="button" value="btn1" id="b1" onclick="f1()"/>Because your visitor can also add custom options as he want and delete them without need any info about his options . This code is the most responsive delete code that you can write as your selected delete..
enjoy it:))))
document.getElementById(this).innerHTML = ''; Put it inside your if-case. What it does is just to check for the current object within the document and replace it with nothing. You'll have too loop through the list first, I am guessing you are already doing that since you have that if.
A simple working solution using vanilla JavaScript:
const valuesToRemove = ["value1", "value2"]; valuesToRemove.forEach(value => { const mySelect = document.getElementById("my-select"); const valueIndex = Array.from(mySelect.options).findIndex(option => option.value === value); if (valueIndex > 0) { mySelect.options.remove(valueIndex); } }); Other way
document.querySelectorAll('#select option').forEach(i=>{ if(frm.product.value == i.value){ i.remove(); }else {} }) A few caveats not covered in most answers:
A take on these:
const eligibleOptions = ['800000002', '800000001']; let optionsList = document.querySelector("select#edit-salutation"); for (let i = 1; i<optionsList.length; i++) { if(eligibleOptions.indexOf(optionsList.options[i].value) === -1) { cbxSal.remove(i); i--; } } Use HTML5 Native API for Select. Fetch the options and pass the index in the remove function.
var s = document.getElementById("ctl00_ContentPlaceHolder1_ddlxml") var options = s.options for(var i=0; i<options.length; i++) { if(options[i].text==='UP3151005_180822FTO_1055352') s.remove(i); if(options[i].text==='UP3151005_180822FTO_1055371') s.remove(i); if(options[i].text==='UP3151005_180822FTO_1055560') s.remove(i); if(options[i].text==='UP3151005_180822FTO_1055617') s.remove(i); } Removing an option
$("#val option[value='A']").remove(); 