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

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

我是一个JavaScriptNoob，所以我尝试了许多不同的代码，但都不管用，我认为最好有人能从头开始编写这个简单的代码

想象一下，这两个选项都是克隆的：

<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中切换为红色，反之亦然。

您可以添加一个公共类，并在更改事件中选择如下内容

Jquery

 $(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;
    })
  })
})

红色
黄色的
蓝色
红色
黄色的
蓝色
var californiaSelect=document.getElementById（'californias'）；
var texasSelect=document.getElementById（'texas'）；
californiaSelect.addEventListener（'change'，（）=>{
texasSelect.value=californiaSelect.value；
})
texasSelect.addEventListener（'change'，（）=>{
californiaSelect.value=texasSelect.value；
})

你可以发现一个有效的例子是

---

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

constselects=[…document.getElementsByTagName（“select”）]；
选择.forEach（s=>{
s、 addEventListener（“变更”，（e）=>{
选择.forEach（sl=>{
if（sl.querySelectorAll（`option[value=${e.target.value}]`）.length）
sl.value=e.target.value；
})
})
})

红色
黄色的
蓝色
棕色的
红色
黄色的
蓝色
红色
黄色的
蓝色

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

• 在

  JavaScript

  中引用

  选择
  元素，并将这两个元素存储在
  数组中
  
  
  当循环通过
  select
  s时，我们可以存储当前
  select
  的索引，该索引必须用于获取另一个
  select
  （一个简单的数学计算）
  

• 循环通过该

  数组

  （这意味着循环通过

  选择

  s），并将

  更改

  事件侦听器连接到每个

  选择

  元素

• 根据所选

  选项

  的

  值

  过滤另一个

  选项的
  选项
  后，获取必须选择的
  选项

• 如果有一个

  选项

  具有与所选

  选项

  相同的

  值

  ，请在另一个

  选择中选择该
  选项

这可能仍然有点含糊不清，一个演示相当于一百个文档：

下一个演示考虑到一个/一些选项可能不会出现在两个

select

元素中，只是什么都不会发生，相同的功能保持不变

/**存储所选内容的数组**/
const selects=[document.getElementById（'california'）、document.getElementById（'texas'）；
/**##循环选择这些选项
*el：回路中的电流选择。
*idx：它在“selects”数组中的索引。
**/
选择.forEach（（el，idx）=>{
/**附加更改侦听器**/
el.addEventListener（'change'，（）=>{
/**获取应在“其他选择”中选择的选项，如果在其中找到，请选择**/
/**“selects[Math.abs（idx-1）]”获取另一个select（未更改的）**/
consttobeselected=[…选择[Math.abs（idx-1）].options].filter（o=>o.value==el.options[el.selectedIndex].value）；
/**如果我们从另一个选择的选项中有一个与所选选项具有相同值的选项，则返回以便被选择**/
/**如果有一个选项符合上述条件，只需选择它**/
toBeSelected[0]&（选择[Math.abs（idx-1）]。selectedIndex=toBeSelected[0]。索引）；
});
});

红色
黄色的
蓝色
红色
黄色的
蓝色
绿色
这是非常简单的代码：

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


红色
黄色的
蓝色
棕色的
对具有相同选项的类使用公共类。简化所需的任何逻辑…只需循环该类基本思想是向A添加一个
onchange
处理程序，将B设置为相同的
.value
，反之亦然。将你的尝试添加到问题中，最好是作为一个答案；stackoverflow不是一个免费的代码编写服务。你已经试过什么了？您熟悉jquery吗？您可以使用
$（'select'）.val（）
获取select的值，并使用例如
$（'#得克萨斯'）.val（'blue'）对其进行设置参考此问题如果您有使用Jquey的选项，它可能会对您有所帮助，您可以使用下面的我的解决方案..如果您根本不是在寻找纯JavaScript解决方案，问题没有标记为JQUERY谢谢！我试过javascript和jquery，它们都能工作！但是，我没有提到我需要贝宝的这些下拉列表，pp通过选择值传递产品名称，因此不可避免地会有空格，例如“Brown Bag-$1000”。只要选项值中有空格或逗号，它就会停止工作。。事实上，如果选项值中有空格（即多个单词），则所有给定的解决方案都不起作用。有什么办法可以解决这个问题吗？非常感谢。
<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>