JavaScript语言切换显示函数失效问题求助

问题根源 #

• HTML结构错误：<select>标签的合法子元素只有<option>或<optgroup>，你嵌套了<ul>和<li>，导致下拉菜单的选项无法正常识别和交互。
• JS逻辑错误：两个if分支的操作完全重复，无论选择印尼语还是英语，都会显示英文内容、隐藏印尼语内容，逻辑完全颠倒。

修正后的代码 #

HTML部分

<select class="nav-item has-sub-menu language-selector" id="language_select" onchange="changeFunc();">
  <option class="nav-link sub-menu-link text-white" disabled selected value="">Language</option>
  <option class="nav-link sub-menu-link text-dark" value="id">Indonesia</option>
  <option class="nav-link sub-menu-link text-dark" value="en">English</option>
</select>

<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-id1">
  <p class="slide-subtitle narrow-centerd-text">
    indonesia indonesia indonesia
  </p>
</div>
<div class="col-9 col-md-10 col-lg-8 mx-auto" id="slider-en1">
  <p class="slide-subtitle narrow-centerd-text">
    en en en
  </p>
</div>

JavaScript部分

// 初始状态：显示印尼语，隐藏英语
document.getElementById('slider-en1').style.visibility = 'hidden';
document.getElementById('slider-id1').style.visibility = 'visible';

function changeFunc() {
  const selectBox = document.getElementById("language_select");
  const selectedValue = selectBox.value; // 简化选中值的获取方式

  if (selectedValue === 'id') {
    // 选择印尼语：显示对应内容，隐藏英语
    document.getElementById('slider-id1').style.visibility = 'visible';
    document.getElementById('slider-en1').style.visibility = 'hidden';
  } else if (selectedValue === 'en') {
    // 选择英语：显示对应内容，隐藏印尼语
    document.getElementById('slider-en1').style.visibility = 'visible';
    document.getElementById('slider-id1').style.visibility = 'hidden';
  }
}

额外优化建议 #

• 可以用display: none/block替代visibility，前者会完全移除元素占据的空间，后者仅隐藏但保留空间，根据布局需求选择。
• 避免使用内联onchange事件，推荐用addEventListener绑定事件，代码更易维护：

  document.getElementById('language_select').addEventListener('change', changeFunc);
  

内容的提问来源于stack exchange，提问作者Ardhian Fahmi S