Vanilla Javascript 多个相同的 selects，当您 select 1 个选项时，所有其他 selects 更改为相同的选项

Question

如果我们在同一页面中有 3 个相同的 select，但位于页面的不同部分

<div>
<select>
    <option value="london">London</option>
    <option value="paris">Paris</option>
</select>
</div>
<div>
<select>
    <option value="one">1</option>
    <option value="two">2</option>
    <option value="three">3</option>
    <option value="four">4</option>
</select>
</div>
<div>
  <p> hello </p>
</div>
<div>
  <p> This is a random sentence </p>
</div>
<select>
    <option value="one">1</option>
    <option value="two">2</option>
    <option value="three">3</option>
    <option value="four">4</option>
</select>
<div>
  <p> Bye </p>
</div>
<div>
  <p> This is a random second sentence </p>
</div>
<select>
    <option value="one">1</option>
    <option value="two">2</option>
    <option value="three">3</option>
    <option value="four">4</option>
</select>

我希望如果我 select 例如第一个 select 中的 2，其他 2 select 也更改为选项值 =“两个”。这可能吗？谢谢:)

Answer 1

我会委托。

将容器更改为最近的包含所有选择的静态容器或包装它们

这里我给了我要同步的选择class

const selects = document.querySelectorAll("select.sync");
document.addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("sync")) {
    const idx = tgt.selectedIndex;
    selects.forEach(sel => sel.selectedIndex = idx);
  }
})

<div>
  <select>
    <option value="london">London</option>
    <option value="paris">Paris</option>
  </select>
</div>
<div>
  <select class="sync">
    <option value="one">1</option>
    <option value="two">2</option>
    <option value="three">3</option>
    <option value="four">4</option>
  </select>
</div>
<div>
  <p> hello </p>
</div>
<div>
  <p> This is a random sentence </p>
</div>
<select class="sync">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
  <option value="four">4</option>
</select>
<div>
  <p> Bye </p>
</div>
<div>
  <p> This is a random second sentence </p>
</div>
<select class="sync">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
  <option value="four">4</option>
</select>

Vanilla Javascript 多个相同的 selects，当您 select 1 个选项时，所有其他 selects 更改为相同的选项

Vanilla Javascript multiple same selects, when you select 1 option, all other selects change to the same option

html

javascript

select

option