如何使特定選項出現在 select 菜單中？

Question

我在一個程序中有兩個 select 字段。 select 兩個字段都包含值為 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達到如下效果：

（僅作為示例）如果用戶在第一個 select 字段（ id="noc" ）中選擇了選項 8，則在第二個 select 字段（ id="po" )。

Answer 1

您可以使用onChange方法和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>

Answer 2

你可以試試這個，當第一個 select (noc) 選擇的選項發生變化時，循環第二個 select (po) 中的選項並隱藏其值大於第一個 Z99938282F04076EFCF42Z (po) 中選擇的選項值的選項。

 const noc = document.getElementById('noc'); const po = document.getElementById('po'); noc.addEventListener('change', (e) => { [...po.children].forEach(child => { if (Number(child.getAttribute('value')) > e.target.value) { return child.style.display = 'none' } }) });

 <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>

Answer 3

 const max = 10; var items = [...Array(max).keys()] var noc = document.getElementById("noc"); var po = document.getElementById("po"); items.forEach(n => { var opt = document.createElement("select"); opt.value = n; noc.appendChild(opt); po.appendChild(opt); }); noc.addEventListener("change", e => { var selected = e.target.value; po.querySelectorAll("option").forEach((el, index) => { if (selected < index) { el.style.display = "visible"; } else { el.style.display = "none"; } }); });

 .invisible { display: none; }

 <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>