如何使特定选项显示在选择菜单中？

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>

我想要的是，如果用户已在第一个选择字段（id =“ noc”）中选择了选项8，则低于8（即9和10）的选项在第二个选择字段（id =“ po”）。我想通过使用javascript来实现。

Answer 1

Yoy可以使用onChange方法和querySelectorAll来做到这一点>

Answer 2

当第一个选择元素发生更改时，请循环遍历第二个选择中的选项，并隐藏其值属性大于在第一个选择元素中选择的值的那些选项