使用JavaScript实现下拉框选项变更时联动修改另一下拉框选项

你的代码逻辑已经能实现基础的反向联动需求，这里可以做一些优化，同时补充初始状态对齐和可选的双向联动功能，让交互更完整：

完整实现代码 #

HTML结构

<select name="languages" id="languages">
    <option value="english">English</option>
    <option value="turkish">Turkish</option>
</select>
<select name="languagesT" id="languagesT">
    <option value="turkish">Turkish</option>
    <option value="english">English</option>
</select>

JavaScript代码

const langSelect = document.getElementById("languages");
const targetLangSelect = document.getElementById("languagesT");

// 通用反向同步函数
function syncReverseLanguages(source, target) {
    target.value = source.value === "english" ? "turkish" : "english";
}

// 页面加载时先同步初始状态
syncReverseLanguages(langSelect, targetLangSelect);

// 监听第一个下拉框的变化
langSelect.addEventListener("change", () => {
    syncReverseLanguages(langSelect, targetLangSelect);
});

// 可选：支持修改第二个下拉框时同步第一个
targetLangSelect.addEventListener("change", () => {
    syncReverseLanguages(targetLangSelect, langSelect);
});

关键优化点 #

• 提取通用同步函数，避免重复代码，逻辑更清晰
• 增加初始状态同步，确保页面刚加载时两个下拉框就处于反向选中状态
• 可选添加第二个下拉框的监听，实现双向反向联动，用户修改任意一个下拉框，另一个都会自动切换到相反选项

如果不需要双向联动，只保留第一个下拉框的监听事件即可，你的原始代码本身已经能实现单向的反向切换效果。

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