如何用JavaScript实现按钮点击切换Select下拉框的两个选项？

当然可以实现，以下是具体的代码方案，直接整合到你的HTML中即可：

<html>
<head>
    <script>
        function toggleFlavor() {
            // 获取下拉菜单元素
            const selectField = document.getElementById('selectField');
            // 切换选中项：如果当前选的是第一个选项，就切换到第二个，反之则切换回第一个
            selectField.selectedIndex = selectField.selectedIndex === 0 ? 1 : 0;
        }

        // 确保DOM加载完成后再绑定点击事件
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('flavorBtn').addEventListener('click', toggleFlavor);
        });
    </script>
</head>
<body>
    <button id="flavorBtn" class="flavorBtn">Toggle Flavors</button><br><br>
    <select name="flavor" id="selectField">
        <option value="Vanilla">Vanilla</option>
        <option value="Chocolate">Chocolate</option>
    </select>
</body>
</html>

关键逻辑说明 #

• selectedIndex是下拉菜单的核心属性，代表当前选中项的索引（从0开始计数）
• 通过三元运算符判断当前选中的索引，直接切换到另一个选项的索引
• 使用DOMContentLoaded事件确保页面元素加载完成后再绑定点击事件，避免出现找不到元素的报错

如果你更倾向于直接在按钮上绑定onclick属性，也可以这样修改按钮代码：

<button id="flavorBtn" class="flavorBtn" onclick="toggleFlavor()">Toggle Flavors</button>

同时可以去掉DOMContentLoaded的监听代码，直接保留toggleFlavor函数即可。

内容的提问来源于stack exchange，提问作者Nam Tab