html select 选项 javascript

Question

我有这张表和这些选项。 我想这样做，当我在第一个 select 列表中的 select 二进制文件时，它不会在第二个 select 列表中自动选择。 朋友告诉我可以在 JavaScript 中完成，但他和我不知道如何。

为了更好地理解：如果我在第一个选择器中 select 一个值为 2 的选项，则不可能在第二个 select 中使用 select

所以如果有人可以帮助我，请回答

 <tr> <td class="center"> <select id="notationoption" name="notation_from"> <option value="2">Binary</option> <option value="3">Ternary</option> <option value="4">Quaternary</option> </select> </td> </tr> <tr> <td class="center"> <select id="notationoption" name="notation_to"> <option value="2">Binary</option> <option value="3">Ternary</option> <option value="4">Quaternary</option> </select> </td> </tr>

Answer 1

您可以使用第一个 select 上的更改事件来禁用第二个 select 中具有相同值的选项。 此外，您不能有两个具有相同 ID 的元素，因此您需要为您的第二个 select 提供不同的 ID。

 const select1 = document.getElementById("notationoption1"); const select2 = document.getElementById("notationoption2"); select1.addEventListener("change", e=>{ const disabled = select2.querySelector("option[disabled]"); if(disabled) disabled.disabled = false; select2.querySelector("option[value='"+ select1.value + "']").disabled = true; });

 <tr> <td class="center"> <select id="notationoption1" name="notation_from"> <option value="2">Binary</option> <option value="3">Ternary</option> <option value="4">Quaternary</option> </select> </td> </tr> <tr> <td class="center"> <select id="notationoption2" name="notation_to"> <option value="2" disabled>Binary</option> <option value="3">Ternary</option> <option value="4">Quaternary</option> </select> </td> </tr>