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

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 california 中选择红色，则需要在 ID texas 中切换为红色，反之亦然。

Answer 1

您可以添加一个通用类并选择更改事件，如下所示

查询

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

由@Emeeus 编写的纯JavaScript解决方案

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

完成此操作的简单方法是：

• 引用JavaScript的select元素并将它们中的两个存储在一个array 。

  • 在循环select我们可以存储当前select的索引，该索引必须用于获取另一个select （一个简单的数学计算）。

• 循环遍历该array （这意味着循环遍历select ）并将change事件侦听器附加到每个select元素。

• 在根据所选option的value过滤另一个select的options后，获取必须选择的option （如果找到）。
• 如果有一个option具有相同value作为选择的option中，选择option中的其他select 。

这可能还是有点模棱两可，一个演示值一百个文档：

下一个演示考虑到一个/某些选项可能不会出现在两个select元素中，根本不会发生任何事情并且相同的功能保持原样。

 /** an array that stores the selects **/ const selects = [document.getElementById('california'), document.getElementById('texas')]; /** ## cycle through these selects * el: current select in the loop. * idx: its index in the "selects" array. **/ selects.forEach((el, idx) => { /** attach change listener **/ el.addEventListener('change', () => { /** get the option that should be selected in the other select if found there **/ /** "selects[Math.abs(idx - 1)]" gets the other select (the one that isn't changed) **/ const toBeSelected = [...selects[Math.abs(idx - 1)].options].filter(o => o.value === el.options[el.selectedIndex].value); /** if we have an option from the other select's options that has the same value as the selected one then return in order to be selected **/ /** if ther's an option that matches the above condition simply select it **/ toBeSelected[0] && (selects[Math.abs(idx - 1)].selectedIndex = toBeSelected[0].index); }); });

 <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> <!-- new option that doesn't exist in the other select element --> <option value="green">green</option> </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>

你可以找到一个工作示例是这个小提琴

getElementById

添加事件监听器