时间戳

首页 > 解决方案 > 从不同的选择标签中选择值

javascript - 从不同的选择标签中选择值

问题描述

我有两个选择标签，一个法语和一个英语。我希望所选选项根据相反的选择标签进行更改。因此，如果我选择一个法语单词，对应的英语单词会自动更改，反之亦然。我正在寻找一个纯 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>

标签： javascripthtmlselect

解决方案

考虑到选择中匹配元素的顺序是正确的（选择法语中的选项 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;
    }
  }
}

推荐阅读