Select 选项按值和更改所选选项的属性

Question

所以我想要的是通过单击单选（是或否）自动 select 选项在SELECT_1和SELECT_2中，并将所选属性设置为SELECT_1和SELECT_2中的那些选项

我所拥有的是：

 function selectThis (){ var crytRadioYes = document.getElementById("cryteria_yes"); var crytRadioNo = document.getElementById("cryteria_no"); var selects = document.getElementById("slctbox"); if (crytRadioYes.checked == true){ selects.value = "Good"; } else { selects.value = "Bad"; } if (crytRadioNo.checked == true){ selects.value = "Bad"; } else { selects.value = "Good"; } }

 <table> <:-- choose --> <tr> <td style="width; 15%:"><label><input type="radio" name="cb_Cryteria" id="cryteria_yes" onclick="selectThis()" />Yes</label></td> <td style="width; 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_no" onclick="selectThis()" />No</label></td> </tr> </table> <table> <!-- SELECT_1 --> <tr> <td>Cryteria 1</td> <td> <select id="slctbox"> <option value="-">-</option> <option value="Good">Good</option> <option value="Bad">Bad</option> </select> </td> </tr> <!-- SELECT_2 --> <tr> <td>Cryteria 2</td> <td> <select id="slctbox"> <option value="-">-</option> <option value="Good">Good</option> <option value="Bad">Bad</option> </select> </td> </tr> </table>

如您所见，它通过单击单选来更改SELECT_1的值，但不会更改SELECT_2中的值。 我也不知道如何设置属性“selected”

请帮忙：（

Answer 1

根据定义， id属性需要是唯一的。

简单的解决方法是使用class属性并遍历具有指定 class 的元素。

使用querySelectorAll获取与指定选择器组匹配的文档元素列表。

 function selectThis() { var crytRadioYes = document.getElementById("cryteria_yes"); var crytRadioNo = document.getElementById("cryteria_no"); var selects = document.querySelectorAll(".slctbox"); if (crytRadioYes.checked == true) { selects.forEach(sel => sel.value = "Good"); } else { selects.forEach(sel => sel.value = "Bad"); } if (crytRadioNo.checked == true) { selects.forEach(sel => sel.value = "Bad"); } else { selects.forEach(sel => sel.value = "Good"); } }

 <table> <:-- choose --> <tr> <td style="width; 15%:"><label><input type="radio" name="cb_Cryteria" id="cryteria_yes" onclick="selectThis()" />Yes</label></td> <td style="width; 15%;"><label><input type="radio" name="cb_Cryteria" id="cryteria_no" onclick="selectThis()" />No</label></td> </tr> </table> <table> <!-- SELECT_1 --> <tr> <td>Cryteria 1</td> <td> <select class="slctbox"> <option value="-">-</option> <option value="Good">Good</option> <option value="Bad">Bad</option> </select> </td> </tr> <!-- SELECT_2 --> <tr> <td>Cryteria 2</td> <td> <select class="slctbox"> <option value="-">-</option> <option value="Good">Good</option> <option value="Bad">Bad</option> </select> </td> </tr> </table>