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

有一种非常简单的方法。

在变更监听器中，您只需在应用自己的逻辑后调用另一个选择并更改其选择索引即可。

请在此处检查代码：

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和值。 Working example here

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

以防万一，两个选择中的选项顺序都不相同，这将起作用。干杯！

javascript-通过“另一个选择”选择下拉菜单onchange

2 个答案: