如何使特定选项出现在选择菜单中？

Question

我在一个程序中有两个选择字段。两个选择字段都包含值为 1 到 10 的选项。代码如下：

<select id="noc">
       <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>

我想使用 JavaScript 实现以下效果：

（仅作为示例）如果用户在第一个选择字段 ( id="noc") 中选择了选项 8，则在第二个选择字段 ( id="po") 中应该看不到 8 以下的选项（即 9 和 10 ）。

Answer 1

您可以使用 usingonChange方法 和 with来完成此操作querySelectorAll。

显示或可见性属性不适用于跨浏览器。所以你应该重新创建选项。

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>