javascript - Select 下拉菜单更改为“另一个 select”

Question

my-select是主要的，当用户选择时，它会打开弹出窗口（现在可以使用），但我想要的是当我选择my-select2时它也应该更改值。

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select id="my-select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>


document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

Answer 1

有一种非常简单的方法可以做到这一点。

在更改侦听器中，您只需调用另一个 select 并在应用您自己的逻辑后更改它的选定索引。

请在此处检查代码：

 document.getElementById('my-select').addEventListener('change', function() { console.log('You selected: ', this.value); document.getElementById("my-select2").selectedIndex = this.selectedIndex; });

 <select id="my-select"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select id="my-select2"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>

Answer 2

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
  selectOptionInMySelect2(this.value)
});

function selectOptionInMySelect2(value) {

  const selectElement = document.getElementById('my-select2');
  const allOptions = selectElement.options;

  for(let i=0; i < allOptions.length; i++) {

    if(allOptions[i].value == value) {
      selectElement.selectedIndex = i;
      break;
    }
  }
}

包含与您的代码段中相同的 id 和值。 这里的工作示例

直到我编辑它时才意识到答案已经发布。 哇，社区！

以防万一，两个 selects 中的选项顺序不同，这将起作用。 干杯!