如何用JavaScript隐藏HTML select下拉框中不需要显示的多语言元素

问题原因 #

你原来的写法有两个问题：

1. 你给两个带lang属性的提示option都加了selected属性，初始状态就会同时被选中，自然会同时显示。
2. 你之前的双语切换逻辑大概率是通过设置display: none隐藏非目标语言元素，但option属于表单控件，多数浏览器对option的display属性支持存在兼容性问题，就算设置了隐藏也不会生效。

解决方案 #

这里提供两种可行的实现方式，你可以根据自己的现有代码逻辑选择：

方式1：动态渲染占位文本（更推荐）

不需要写多个重复的提示option，只留一个占位节点，切换语言时动态更新文本内容即可：

1. 修改HTML结构：

<div class="col">
   <select class="custom-select custom-select-lg mb-3 " id="mySelect" onchange="brightness()" >
          <!-- 预留占位选项，用来显示当前语言的提示文本 -->
          <option selected disabled id="brightnessPlaceholder"></option>
          <option value="0.1">1</option>
          <option value="0.2">2</option>
          <option value="0.3">3</option>
   </select>
</div>

2. 在你现有的语言切换逻辑中新增占位文本更新逻辑：

// 你可以把双语文本和现有语言包整合，这里做示例
const langPack = {
  en: { brightnessTip: "Brightness" },
  es: { brightnessTip: "Luminosidad" }
}

// 切换语言的函数
function changeLang(currentLang) {
  // 你原来的其他元素显隐逻辑保持不变
  document.querySelectorAll('[lang]').forEach(el => {
    el.style.display = el.getAttribute('lang') === currentLang ? 'block' : 'none'
  })
  // 新增：同步更新select的提示文本
  document.getElementById('brightnessPlaceholder').textContent = langPack[currentLang].brightnessTip
}

方式2：用hidden属性控制option显隐（适合要保留lang属性写法的场景）

如果你一定要把双语文本直接写在option上，就改用HTML原生的hidden属性控制option的显隐，这个属性对option的兼容性远好于display：

1. 修改HTML结构，去掉重复的selected属性：

<div class="col">
   <select class="custom-select custom-select-lg mb-3 " id="mySelect" onchange="brightness()" >
          <option selected disabled lang="en">Brightness</option>
          <option disabled lang="es" hidden>Luminosidad</option>
          <option value="0.1">1</option>
          <option value="0.2">2</option>
          <option value="0.3">3</option>
   </select>
</div>

2. 调整语言切换逻辑，对option元素单独处理：

function changeLang(currentLang) {
  // 普通非option元素沿用原来的display控制逻辑
  document.querySelectorAll('[lang]:not(option)').forEach(el => {
    el.style.display = el.getAttribute('lang') === currentLang ? 'block' : 'none'
  })
  // option元素用hidden属性控制显隐，同时切换选中状态
  document.querySelectorAll('option[lang]').forEach(el => {
    const isMatch = el.getAttribute('lang') === currentLang
    el.hidden = !isMatch
    if(isMatch) el.selected = true
  })
}

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