如何根據 javascript 中的復選框選擇更改下拉選項？

Question

如何根據復選框選擇更改下拉列表。

 function checbocChecked(event) { let check = document.querySelectorAll('input[type=checkbox]:checked').length; alert(check) if (check > 1) { //here how can i manipulate all the dropdown such that it become MULTIPLE } else { //here how can i manipulate all the dropdown such that it become SINGLE } }

 <table> <thead> <tr> <td>Checbox</td> <td>Key</td> <td>Value</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox" onclick="checbocChecked(event)"></td> <td><input type="numeric" value=1></td> <td> <select> <option value="SINGLE">SINGLE</option> <option value="MULTIPLE">MULTIPLE</option> </select> </tr> <tr> <td><input type="checkbox" onclick="checbocChecked(event)"></td> <td><input type="numeric" value=2></td> <td> <select> <option value="SINGLE">SINGLE</option> <option value="MULTIPLE">MULTIPLE</option> </select> </tr> </tbody> </table> <div id="final"></div>

如果選中單個復選框，則表中的所有下拉列表都應將SINGLE作為選項值，如果選中多個復選框，則所有下拉列表將保留MULTIPLE作為選項值

我試過的是上面

Answer 1

只需遍歷select字段並相應地更新值。

 function checbocChecked(event) { let check = document.querySelectorAll('input[type=checkbox]:checked').length; alert(check) if (check > 1) { //here how can i manipulate all the dropdown such that it become MULTIPLE let elements = document.querySelectorAll('select'); for (var i=0; i < elements.length; i++) { elements[i].value = "MULTIPLE"; } } else { //here how can i manipulate all the dropdown such that it become SINGLE let elements = document.querySelectorAll('select'); for (var i=0; i < elements.length; i++) { elements[i].value = "SINGLE"; } } }

 <table> <thead> <tr> <td>Checbox</td> <td>Key</td> <td>Value</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox" onclick="checbocChecked(event)"></td> <td><input type="numeric" value=1></td> <td> <select> <option value="SINGLE">SINGLE</option> <option value="MULTIPLE">MULTIPLE</option> </select> </tr> <tr> <td><input type="checkbox" onclick="checbocChecked(event)"></td> <td><input type="numeric" value=2></td> <td> <select> <option value="SINGLE">SINGLE</option> <option value="MULTIPLE">MULTIPLE</option> </select> </tr> </tbody> </table> <div id="final"></div>