如何通过点击表格行设置两个dropdown（下拉菜单）的选中值？

点击表格行/单元格（理想场景是表格位于另一个HTML页面）时，动态修改两个下拉菜单的选中值，但当前代码点击后两个下拉框会互相清空，核心问题是下拉菜单的取值逻辑受表格列而非行影响。

1. 下拉框获取逻辑错误：原代码中const dropdowns = document.getElementById('dropdown') && ('dropdown_2');未正确获取第二个下拉框，且未定义dropdown和dropdown_2变量，导致后续赋值逻辑无效。
2. 监听对象错误：监听单个<td>单元格，点击时只能获取当前单元格的value，无法拿到整行对应的两组值，导致给两个下拉框设置不匹配的取值（比如第一列的option1无法匹配第二个下拉框的选项），进而出现清空现象。
3. 赋值逻辑错误：强制给两个下拉框设置同一个值，但两个下拉框的选项值并不对应，不存在的选项被选中时下拉框会显示为空。

核心思路 #

• 监听表格行（<tr>）而非单元格，点击行时获取该行下两个<td>的对应值，分别赋值给两个下拉框。
• 正确获取两个下拉框的DOM元素。
• 跨页面场景通过localStorage传递选中值，目标页面监听storage事件同步下拉框状态。

修正后的代码 #

HTML部分

<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>Options</th>
    <th>Value</th>
  </tr>
  <tr>
    <td data-value="option1">Option1</td>
    <td data-value="value1">Value1</td>
  </tr>
  <tr>
    <td data-value="option2">Option2</td>
    <td data-value="value2">Value2</td>
  </tr>
  <tr>
    <td data-value="option3">Option3</td>
    <td data-value="value3">Value3</td>
  </tr>
</table>

注：将原生value属性改为data-value，符合HTML5自定义属性规范。

JavaScript部分（表格所在页面）

// 正确获取两个下拉框元素
const dropdown = document.getElementById('dropdown');
const dropdown2 = document.getElementById('dropdown_2');
// 获取所有表格数据行（排除表头行）
const tableRows = document.querySelectorAll('#table tr:not(:first-child)');

// 给每个数据行添加点击事件
tableRows.forEach(row => {
  row.addEventListener('click', function() {
    // 获取当前行下的两个单元格
    const tds = this.querySelectorAll('td');
    // 提取对应单元格的自定义值
    const optionValue = tds[0].getAttribute('data-value');
    const valueValue = tds[1].getAttribute('data-value');
    
    // 分别给两个下拉框设置选中值
    dropdown.value = optionValue;
    dropdown2.value = valueValue;

    // 跨页面场景：将选中值存入localStorage
    localStorage.setItem('selectedOption', optionValue);
    localStorage.setItem('selectedValue', valueValue);
  });
});

跨页面同步代码（下拉框所在页面）

// 监听localStorage数据变化
window.addEventListener('storage', function(e) {
  const dropdown = document.getElementById('dropdown');
  const dropdown2 = document.getElementById('dropdown_2');
  
  if (e.key === 'selectedOption') {
    dropdown.value = e.newValue;
  } else if (e.key === 'selectedValue') {
    dropdown2.value = e.newValue;
  }
});

// 页面加载时初始化下拉框值
window.addEventListener('load', function() {
  const dropdown = document.getElementById('dropdown');
  const dropdown2 = document.getElementById('dropdown_2');
  
  dropdown.value = localStorage.getItem('selectedOption') || dropdown.value;
  dropdown2.value = localStorage.getItem('selectedValue') || dropdown2.value;
});

• 监听行而非单元格，确保一次点击能获取整行的两组对应值，避免下拉框赋值不匹配。
• 使用data-value存储自定义数据，避免与原生HTML属性冲突。
• 跨页面场景通过localStorage实现数据传递，结合storage事件实时同步下拉框状态。

内容的提问来源于stack exchange，提问作者Adam2