时间戳

首页 > 解决方案 > 如何根据另一个选择设置默认选择

javascript - 如何根据另一个选择设置默认选择

问题描述

我在一个页面上有多个下拉选项，选项完全相同，但 ID 不同。我需要下拉 A 和 B 始终选择相同的选项，但前提是它们都共享这些选项。

我是一个 javascript 菜鸟，所以我尝试了许多代码变体，但没有任何效果，我认为最好有人能从头开始编写这个简单的代码。

想象一下这两个带有克隆选项的选择：

<select id="california">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>

<select id="texas">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>

如果您在 ID california 中选择红色，则需要在 ID texas 中切换为红色，反之亦然。

标签： javascripthtmlinput

解决方案

理想的解决方案是使用类，但这里的 HTML 是一个解决方案：

const selects = [...document.getElementsByTagName("select")];

selects.forEach(s => {
  s.addEventListener("change", (e) => {
    selects.forEach(sl => {
      if (sl.querySelectorAll(`option[value=${e.target.value}]`).length)
        sl.value = e.target.value;
    })
  })
})
<select id="california">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
<option value="brown">brown</option>
</select>

<select id="texas">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>

<select id="las_vegas">
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>

推荐阅读