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

你的代码存在三个核心问题，导致点击表格行后下拉框变成空白：

• 选择器错误：querySelectorAll('#table')选中的是整个表格元素，而非表格行，事件绑定对象完全不对
• 缺少数据属性：表格行<tr>没有设置data-value属性，点击时获取的selectedValue为null，下拉框赋值null就会显示空白
• 事件绑定逻辑错误：循环绑定的是表格而非每一行，点击行时事件冒泡到表格，但表格本身没有data-value属性

修正后的同页面代码 #

<select id="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<table border="1" cellpadding="1" cellspacing="1" id="table">
<tr data-value="option1"><td>option1</td></tr>
<tr data-value="option2"><td>option2</td></tr>
<tr data-value="option3"><td>option3</td></tr> 
</table>

<script>
  // 获取下拉框和所有表格行
  const dropdown = document.getElementById('dropdown');
  const tableRows = document.querySelectorAll('#table tr');

  // 给每一行绑定点击事件
  tableRows.forEach(row => {
    row.addEventListener('click', function() {
      // 获取当前行的data-value值
      const selectedValue = this.getAttribute('data-value');
      // 设置下拉框选中值
      dropdown.value = selectedValue;
    });
  });
</script>

跨页面实现方案（其他页面表格行控制当前页面下拉框） #

如果需要从另一个页面的表格行控制当前页面的下拉框，可以用localStorage传递数据：

表格页面（示例：table.html）代码

<table border="1" cellpadding="1" cellspacing="1" id="table">
<tr data-value="option1"><td>option1</td></tr>
<tr data-value="option2"><td>option2</td></tr>
<tr data-value="option3"><td>option3</td></tr> 
</table>

<script>
  const tableRows = document.querySelectorAll('#table tr');
  tableRows.forEach(row => {
    row.addEventListener('click', function() {
      const selectedValue = this.getAttribute('data-value');
      // 将选中值存入localStorage
      localStorage.setItem('selectedDropdownValue', selectedValue);
    });
  });
</script>

下拉框页面（示例：dropdown.html）代码

<select id="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<script>
  const dropdown = document.getElementById('dropdown');
  
  // 页面加载时先读取localStorage设置初始值
  const initialValue = localStorage.getItem('selectedDropdownValue');
  if (initialValue) {
    dropdown.value = initialValue;
  }

  // 监听localStorage变化，实时更新下拉框
  window.addEventListener('storage', function(e) {
    if (e.key === 'selectedDropdownValue') {
      dropdown.value = e.newValue;
    }
  });
</script>

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