Question

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

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

例如：option1 - mark . option2 - 20

    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>

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

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

Answer 3

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

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

根据另一个下拉菜单更改下拉菜单选择值？

3 个答案: