根据另一个下拉列表更改下拉选择值？答案

【问题标题】：Change dropdown selection value based on another dropdown?根据另一个下拉列表更改下拉选择值？
【发布时间】：2020-08-26 19:32:54
【问题描述】：

我有两个下拉菜单 option1 和 option2。我正在尝试根据索引的另一个下拉选择来更改下拉选择。

如果在option1 中选择了第一个选项，则还必须从option2 下拉列表中选择相同的选项。

例如：option1 - mark . option2 - 20

jsfiddle link

    Option1<br>
    <select id="option1">
    <option value="john">john</option>
        <option value="mark">mark</option>
            <option value="rob">rob</option>
    </select><br>


    Option2<br>
        <select id="option2">
            <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        </select>

【问题讨论】：

谷歌“级联下拉菜单”

标签： javascript html jquery drop-down-menu

【解决方案1】：

这样的事情应该可以为您解决问题。

let option1 = document.getElementById('option1');
let option2 = document.getElementById('option2');

function matchOptions(e) {
 let option = e.target.selectedIndex;
 option1.selectedIndex = option;
 option2.selectedIndex = option;
}

option1.addEventListener('change', matchOptions);
option2.addEventListener('change', matchOptions);

    Option1<br>
    <select id="option1">
    <option value="john">john</option>
        <option value="mark">mark</option>
            <option value="rob">rob</option>
    </select><br>


    Option2<br>
        <select id="option2">
            <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        </select>

【讨论】：

【解决方案2】：

用纯 JS 就可以做到这一点

<head>
<title>My Func</title>
</head>
<body>
Option1<br>
<select id="option1" onchange="myFunction()">
  <option value="john">john</option>
    <option value="mark">mark</option>
        <option value="rob">rob</option>
</select><br>


Option2<br>
    <select id="option2">
        <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
    </select>
<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("option1");
  var y = document.getElementById("option2");
  if (x.value==='john'){
    y.value = 19;
  }else if(x.value==='mark'){
    y.value = 20;
  }else if(x.value==='rob'){
    y.value = 21;
  }
}
</script>
 </body>

【讨论】：

【解决方案3】：

<script>
    document.getElementById('option1').addEventListener('change', function () {
        document.getElementById('option2').selectedIndex = this.selectedIndex;
    });
</script>

通过 addEventListener() 方法将一个事件添加到 option1，当用户选择该 'select' 中的任何选项时将执行该事件，此事件允许更改在 option2 中选择的选项，分配给属性 selectedIndex（表示selected index) option1中选择的选项的索引。结果，如果在option1中选择了第一个选项，则选择了option2的第一个选项，依此类推。

【讨论】：

欢迎来到 Stack Overflow。 Stack Overflow 上不鼓励仅使用代码的答案，因为它们没有解释它是如何解决问题的。请编辑您的答案以解释此代码的作用以及它如何回答问题，以便它对 OP 以及其他有类似问题的用户有用。