如何点击子页面表格行设置父页面两个Dropdown的选中值

问题背景 #

原本在同一页面内点击表格行可设置两个下拉框的选中值，现调整需求为：下拉框位于父页面（通过window.open打开子页面的页面），表格在子页面中，需实现子页面点击表格行后修改父页面的下拉框选中状态。

修改后的代码实现 #

父页面代码 #

<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>

<script>
// 打开子页面的示例函数
function openChildPage() {
  window.open('child.html', '_blank', 'width=600,height=400');
}
</script>
<button onclick="openChildPage()">打开子页面</button>

子页面代码 #

<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>

<script>
// 获取表格的非表头行
const tableRows = document.querySelectorAll('#table tr:not(:first-child)');

tableRows.forEach(row => {
  row.addEventListener('click', function() {
    // 校验父页面状态
    if (!window.opener || window.opener.closed) {
      alert('父页面已关闭');
      return;
    }

    // 获取当前行的选中值
    const cells = this.querySelectorAll('td');
    const optionVal = cells[0].dataset.value;
    const valueVal = cells[1].dataset.value;

    // 操作父页面的下拉框
    const parentDropdown1 = window.opener.document.getElementById('dropdown');
    const parentDropdown2 = window.opener.document.getElementById('dropdown_2');

    if (parentDropdown1 && parentDropdown2) {
      parentDropdown1.value = optionVal;
      parentDropdown2.value = valueVal;
    }
  });
});
</script>

关键说明 #

• 通过window.opener对象可以直接访问父页面的document，进而操作父页面的DOM元素
• 必须先判断window.opener是否存在以及父页面是否关闭，防止出现"Cannot read properties of null"的错误
• 将原代码中td的value属性替换为符合HTML规范的data-value自定义属性，避免语义冲突
• 使用tr:not(:first-child)排除表头行，避免点击表头时触发不必要的操作

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