如何使用 js 在 HTML 选择选项之间切换

Question

我有一个带有 3 个选项的 HTML 选择，如下所示 -

        <select id="list">
            <option value="environment" selected>Environment Facing (default)</option>
            <option value="user">User Facing</option>
            <option value="member">Member Facing</option>
        </select>

我想要做的是用一个按钮在这些值之间切换。 那可能吗？ 如果选择了第一个选项，如果我单击按钮第二个选项被选中，如果再次单击后选择第二个选项，则如何切换第三个选项。 有什么办法可以做到。

Answer 1

增加select的selectedIndex ，当你到达最后时环绕。

 document.getElementById("button").addEventListener("click", function() { let list = document.getElementById("list"); let selected = list.selectedIndex; selected = (selected + 1) % list.length; list.selectedIndex = selected; }); document.getElementById("show").addEventListener("click", function() { let list = document.getElementById("list"); console.log(`Selected = ${list.value}`); });

 <select id="list"> <option value="environment" selected>Environment Facing (default)</option> <option value="user">User Facing</option> <option value="member">Member Facing</option> </select> <button id="button" type="button">Toggle</button> <button id="show" type="button">Show selected</button>

Answer 2

一种方法可能是将可用值放入数组中，然后在该数组中找到当前选定值的索引，将其增加 1 并查看是否获得值。 如果您得到undefined （这是您尝试访问不存在索引处的数组元素时得到的结果），则改为使用数组的第一个元素。

 const list = document.getElementById('list'); const values = [...list.options].map(({value}) => value); document.getElementById("button").addEventListener("click", function() { const currentValue = list.value; list.value = values[values.indexOf(currentValue)+1] ?? values[0]; });

 <select id="list"> <option value="environment" selected>Environment Facing (default)</option> <option value="user">User Facing</option> <option value="member">Member Facing</option> </select> <button id="button" type="button">Toggle</button>