Question

我有两个选择标签，一个是法语，一个是英语。我希望所选的选项根据相反的选择标记进行更改。因此，如果我选择法语单词，则英语等效单词会自动更改，反之亦然。我正在寻找一个纯JavaScript函数。

我尝试了多种不同的方法，但没有任何效果。

这是我的html代码。

<select id="french" onchange="myFunction()">
  <option value="bonjour">bonjour</option>
  <option value="monde">monde</option>
</select>

<select id="english" onchange="myFunction()">
  <option value="hello">hello</option>
  <option value="world">world</option>
</select>

Answer 1

考虑到选择中匹配元素的顺序是正确的（选择法语中的选项1匹配选择英语中的选项1 ...），那么下面的小提琴将为您服务。

https://jsfiddle.net/sufo9zxk/

<select id="french" onchange="myFunction(this)">
  <option value="bonjour">bonjour</option>
  <option value="monde">monde</option>
</select>

<select id="english" onchange="myFunction(this)">
  <option value="hello">hello</option>
  <option value="world">world</option>
</select>

function myFunction(changedSelect) {

  var otherSelect = document.getElementById(
    changedSelect.id === 'french' ? 'english' : 'french'
  );

    for (var i = 0; i < changedSelect.children.length; i++) {
    var op = changedSelect.children.item(i);

    if (op.selected) {
        otherSelect.children.item(i).selected = true;
    }
  }
}

从其他选择标签中选择值

1 个答案: