How to make specific options to appear in select menu?
You can do it with using onChange
method and with querySelectorAll
.
display or visibility attributes doesn't work for cross browsers. So you should recreate options.
var noc=document.getElementById("noc");
var po=document.getElementById("po");
var options=po.querySelectorAll("option");
function nochange(){
po.innerHTML="";
[...options].filter(x=>parseInt(x.value)<=parseInt(noc.value)).forEach(x=>{po.append(x)})
po.value=noc.value;
}
<select id="noc"onChange="nochange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
<!--Some text---->
<select id="po">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>