Question

我在一个页面上有多个下拉选项，选项完全相同，但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中选择红色，则需要在德克萨斯州ID中切换为红色，反之亦然。

Answer 1

您可以添加一个通用类，并在更改事件中选择类似以下内容的

jQuery

 $(document).ready(function(){ 
  $(".select").change(function() {   
    $(".select").not(this).find("option[value="+ $(this).val() + "]").attr('selected', true)
  }); 
});

纯 JavaScript 解决方案，已由@Emeeus编写

const selectElement = [...document.getElementsByClassName("ClassName")];

selectElement.forEach(a => {
  a.addEventListener("change", (e) => {
    selectElement.forEach(aa => {
      if (aa.querySelectorAll(`option[value=${e.target.value}]`).length)
        aa.value = e.target.value;
    })
  })
})

Answer 2

理想的解决方案是使用类，但此处使用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>

Answer 3

完成此任务的简单方法是：

引用select中的JavaScript元素，并将它们中的两个存储在array中。
- 在遍历select时，我们可以存储当前select的索引，该索引必须用于获取其他select（简单的数学计算）。
在该array中循环（这意味着在select中循环），并将change事件侦听器附加到select元素的每个元素上。 / p>
在根据选定的{{1}的option过滤另一个options的{{1}}之后，提取必须找到的select }。
如果有一个value与所选option具有相同的option，请在另一个value中选择该option。

这可能仍然有点模棱两可，一个演示值得一百篇文档：

下一个演示考虑了一个/某些选项可能不会同时出现在两个option元素中的情况，只是什么都不会发生，并且功能保持不变。

select

select

Answer 4

这是非常简单的代码：

<select id="california" onclick="applyEvent()">
    <option value="red">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
    <option value="brown">brown</option>
</select>

<select id="texas" onclick="apply_Event()">
    <option value="red"">red</option>
    <option value="yellow">yellow</option>
    <option value="blue">blue</option>
    <option value="brown">brown</option>
</select>
<script type="text/javascript">
    function applyEvent() {
        document.getElementById("texas").value = document.getElementById('california').value;
    }
    function apply_Event() {
        document.getElementById("california").value = document.getElementById('texas').value;
    }
</script>

Answer 5

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

<script>
var californiaSelect = document.getElementById('california');
var texasSelect = document.getElementById('texas');

californiaSelect.addEventListener('change', () => {
    texasSelect.value = californiaSelect.value;
})
texasSelect.addEventListener('change', () => {
    californiaSelect.value = texasSelect.value;
})
</script>

您可以找到一个有效的示例为this fiddle

getElementById

addEventListener

如何基于其他选择设置默认选择

5 个答案: