如何用原生JS实现单选框选中同步对应值的下拉选项？

要实现单选按钮点击时同步选中下拉菜单对应值的功能，用原生JS就能轻松搞定，核心逻辑很简单：给每个单选按钮绑定点击事件，触发时直接把下拉菜单的value属性设为当前单选按钮的value即可。

完整实现代码 #

<p class="line-item-property__field">
    <label>Color</label><br>
    <input type="radio" name="color" value="1"> <span>1</span><br>
    <input type="radio" name="color" value="2"> <span>2</span><br>
    <input type="radio" name="color" value="3"> <span>3</span><br>
</p>

<p class="line-item-property__field">
    <label>Color</label><br>
    <select id="your-name" name="dropdown-color">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</p>

<script>
// 获取目标下拉菜单元素
const dropdown = document.getElementById('your-name');
// 获取同组所有单选按钮
const radioButtons = document.querySelectorAll('input[name="color"]');

// 给每个单选按钮绑定点击事件
radioButtons.forEach(radio => {
    radio.addEventListener('click', function() {
        // 同步下拉菜单选中值
        dropdown.value = this.value;
    });
});
</script>

关键逻辑说明 #

• document.querySelectorAll('input[name="color"]')：通过name属性精准选中目标单选组，避免影响页面其他单选按钮。
• 遍历单选按钮绑定click事件：确保用户点击任意单选按钮都会触发同步操作。
• dropdown.value = this.value：原生JS支持直接通过value属性设置下拉菜单的选中项，无需手动遍历option元素，浏览器会自动匹配对应值的选项。

可选：双向同步（下拉菜单更改时同步单选按钮） #

如果需要实现反向同步（修改下拉菜单时自动选中对应单选按钮），可以添加这段代码：

dropdown.addEventListener('change', function() {
    const selectedValue = this.value;
    // 找到对应值的单选按钮并设置为选中状态
    const targetRadio = document.querySelector(`input[name="color"][value="${selectedValue}"]`);
    if (targetRadio) {
        targetRadio.checked = true;
    }
});

内容的提问来源于stack exchange，提问作者Alex Mercer