时间戳

首页 > 解决方案 > 根据另一个下拉列表更改下拉选择值？

javascript - 根据另一个下拉列表更改下拉选择值？

问题描述

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

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

例如：option1 - mark . option2 - 20

jsfiddle链接

    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>

标签： javascripthtmljquerydrop-down-menu

解决方案

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

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

推荐阅读