多HTML下拉选择器语言切换功能故障排查请求

问题核心 #

当前代码存在三个关键问题：

• 两个独立下拉框（#lang-switch和#en-lang-switch）未同步更新状态，切换语言时仅处理了区域显示/隐藏，未同步修改另一个下拉框的选项顺序与选中状态
• 每次调用runme都会重复绑定change事件，导致事件触发逻辑混乱
• 页面加载时的CSS初始隐藏规则与JS显示逻辑冲突，可能导致初始状态异常

完整修复方案 #

1. 重构JavaScript逻辑（统一处理语言切换） #

将重复逻辑抽为独立函数，确保语言切换时同步更新所有下拉框状态：

// 初始化语言状态
function initLanguage() {
    // 优先从sessionStorage取语言，默认希伯来语
    const currentLang = sessionStorage.getItem('lang') || 'he';
    updateLangDisplay(currentLang);
    syncDropdowns(currentLang);
}

// 更新页面语言区域显示
function updateLangDisplay(lang) {
    if (lang === 'en') {
        $('[lang="he"]').hide();
        $('[lang="en"]').show();
    } else {
        $('[lang="en"]').hide();
        $('[lang="he"]').show();
    }
    sessionStorage.setItem('lang', lang);
}

// 同步两个下拉框的选项与选中状态
function syncDropdowns(lang) {
    // 更新希伯来语区域的下拉框
    const heDropdownContent = lang === 'he' 
        ? '<option value="he" selected>עברית</option><option value="en">English</option>'
        : '<option value="en" selected>English</option><option value="he">עברית</option>';
    $('#lang-switch').html(heDropdownContent);

    // 更新英语区域的下拉框
    const enDropdownContent = lang === 'en'
        ? '<option value="en" selected>English</option><option value="he">עברית</option>'
        : '<option value="he" selected>עברית</option><option value="en">English</option>';
    $('#en-lang-switch').html(enDropdownContent);
}

// 页面加载完成后执行初始化
$(document).ready(function() {
    initLanguage();

    // 仅绑定一次下拉框切换事件
    $('#lang-switch, #en-lang-switch').change(function() {
        const targetLang = $(this).val();
        updateLangDisplay(targetLang);
        syncDropdowns(targetLang);
    });
});

2. 简化HTML结构（移除内嵌脚本） #

删除body的onload属性和下拉框内的内嵌脚本，由外部JS统一控制：

<body>
    <!-- 希伯来语内容区域 -->
    <section lang="he">
        SOME HEBREW TEXT
        <select id="lang-switch"></select>
    </section>

    <!-- 英语内容区域 -->
    <section lang="en">
        SOME TEXT IN ENGLISH
        <select id="en-lang-switch" lang="en"></select>
    </section>

    <!-- 先引入jQuery，再加载自定义脚本 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        <!-- 上述JavaScript代码放此处 -->
    </script>
</body>

3. 优化CSS初始状态 #

调整默认显示规则，避免与JS初始化逻辑冲突：

/* 默认隐藏英语区域，希伯来语作为初始显示语言 */
[lang="en"] {
    display: none;
}

/* 移除希伯来语区域的默认隐藏规则 */
/* [lang="he"] { display: none; } */

修复说明 #

• 抽离重复逻辑为独立函数，避免代码冗余与事件重复绑定
• 切换语言时同步更新两个下拉框的状态，确保下拉框显示与当前语言一致
• 使用$(document).ready()替代body onload，提升初始化可靠性
• 移除内嵌脚本，统一由外部JS控制，降低维护成本

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