I have the following in the page
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);
}
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();
This should do it
document.getElementsByName("val")[0].remove(0);
document.getElementsByName("val")[0].remove(0);
Check the fiddle here
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;
}
Check the JQuery solution here
$("#selectBox option[value='option1']").remove();
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);
}
});