如何通过点击表格行来设置两个下拉菜单的值？

Question

进一步回答我之前的问题，我现在正在尝试找到一种方法，通过单击表格行/单元格（最好位于另一个 html 页面上）来动态更改 two 下拉菜单的选定值。

下面的代码显示了我尝试让它工作的方法，但它没有同时显示两个下拉菜单的值，而是在单击任何表格行时它们会彼此空白。

显然，下拉菜单受到列而不是行的影响。

 <select id="dropdown">
 <option value="option1">Option 1</option>
 <option value="option2">Option 2</option>
 <option value="option3">Option 3</option>
 </select>
 
 <select id="dropdown_2">
 <option value="value1">Value 1</option>
 <option value="value2">Value 2</option>
 <option value="value3">Value 3</option>
 </select>

 <table border="1" cellpadding="1" cellspacing="1" id="table">
 <tr><th value="">Options</th><th value="">Value</th></tr>
 <tr><td value="option1">Option1</td><td value="value1">Value1</td></tr>
 <tr><td value="option2">Option2</td><td value="value2">Value2</td></tr>
 <tr><td value="option3">Option3</td><td value="value3">Value3</td></tr>
 </table>

 <script>
// Get references to the dropdown and table
 const dropdowns = document.getElementById('dropdown')&&('dropdown_2');
 const tableRows = document.querySelectorAll('#table td');

// Add a click event listener to each table row
 tableRows.forEach(row => {
 row.addEventListener('click', function() {

// Get the value associated with the clicked row
 const selectedValue = this.getAttribute('value');

// Set the dropdown's value to the selected value
 dropdown.value = selectedValue; 
 dropdown_2.value = selectedValue;
  });
});
</script>

感谢您花时间提供解决方案。

Answer 1

您将两个下拉列表的值设置为 selectedValue，该值出现在 dropdown 或 dropdown2 中，但不能同时出现在两者中。在设置其值之前，您需要检查下拉列表中是否存在选项。

一个简单的检查就可以做到这一点：

if (dropdown.querySelector('[value="' + selectedValue + '"]'))
dropdown.value = selectedValue;
else
dropdown_2.value = selectedValue;