如何简化基于select值切换input元素hidden属性的JavaScript代码？

你原来的代码里循环遍历所有option完全没必要，直接获取当前选中的项判断即可，下面是简化后的原生JS实现：

优化后的代码 #

HTML（无需修改）

<select id="rank_current">
  <option value="select">--Select Rank--</option>
  <option value="grandmaster">Grandmaster</option>
  <option value="epic">Epic</option>
  <option value="legend">Legend</option>
  <option class="select-mythic" value="mythic">Mythic</option>
  <option class="select-mythic" value="mythical_honor">Mythical Honor</option>
</select>
<input id="target" type="number" min="0" placeholder="Stars" hidden>

JavaScript

const select = document.getElementById('rank_current');
const targetInput = document.getElementById('target');

select.addEventListener('change', () => {
  // 获取当前选中的option元素
  const selectedOption = select.selectedOptions[0];
  // 判断选中项是否包含指定类，直接控制input的显隐状态
  targetInput.hidden = !selectedOption.classList.contains('select-mythic');
});

优化说明 #

• 直接通过selectedOptions[0]获取当前选中项，省去循环遍历的冗余操作
• 利用hidden属性直接赋值，替代removeAttribute，逻辑更直观：选中项是mythic类时显示输入框，否则隐藏
• 变量命名更语义化，代码可读性更高

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