本文介绍两种精简、现代的 JavaScript 方式，根据 <select> 的选中值动态控制 <input> 的显隐状态，无需遍历选项，代码量大幅减少，兼顾可读性与健壮性。
本文介绍两种精简、现代的 javascript 方式，根据 `
在 Web 开发中，常需根据下拉菜单（<select>）的选择结果动态显示或隐藏关联表单控件（如 <input>）。原始实现通过循环比对每个 <option> 的 class 和 value，逻辑冗余且易出错。现代 DOM 操作结合解构赋值与语义化判断，可将核心逻辑压缩为一行。
✅ 推荐方案一：基于 value 前缀匹配（最简洁）
若所有需触发显示的选项值均以 "mythic" 开头（如 "mythic"、"mythical_honor"），可直接利用 String.prototype.startsWith() 判断：
document.getElementById("rank_current").addEventListener('change', ({ target }) => {
document.getElementById("target").hidden = !target.value.startsWith('mythic');
});该写法优势明显：
- 避免手动遍历 options 或 selectedOptions；
- 利用事件对象解构 { target } 直接获取当前 <select> 元素；
- hidden 是布尔属性，赋值 true/false 即可精准控制显隐（比 removeAttribute() / setAttribute() 更语义清晰、性能更优）；
- 支持后续扩展（如新增 "mythical_legacy" 也自动生效）。
✅ 推荐方案二：基于 class 属性判断（更语义化）
若业务逻辑本质依赖 CSS 类（如 .select-mythic），而非字符串前缀，则应优先检查 classList，确保语义准确、解耦良好：
立即学习“Java免费学习笔记（深入）”；
document.getElementById("rank_current").addEventListener('change', ({ target }) => {
const allSelectedAreMythic = [...target.selectedOptions].every(
option => option.classList.contains('select-mythic')
);
document.getElementById("target").hidden = !allSelectedAreMythic;
});此方案特点：
- 使用展开语法 [...target.selectedOptions] 将类数组转为真数组，兼容 multiple 属性；
- every() 确保所有被选中的选项都具备指定 class（适用于多选场景）；
- 若仅需“任一选中项匹配”，可改用 some()；
- 完全脱离 value 字符串规则，维护性更高——修改选项值不影响逻辑。
⚠️ 注意事项与最佳实践
- 避免 hidden 与 CSS display: none 混用：hidden 是 HTML5 原生布尔属性，浏览器原生支持无障碍访问（屏幕阅读器会跳过 hidden 元素），而 display: none 属于样式控制，语义性较弱；
- ID 查询非必需时建议用 querySelector：若页面存在多个同类组件，可改用 document.querySelector('#rank_current') 或更精确的选择器（如 [data-toggle="stars-input"]）提升可复用性；
- 初始化状态同步：上述代码仅响应 change 事件，页面加载时 <input> 默认 hidden，符合预期；若需首次加载即按默认选中值决定显隐，可在监听器注册后手动触发一次 dispatchEvent(new Event('change'))；
- 兼容性提示：selectedOptions、箭头函数、解构赋值等特性在 IE 中不支持，如需兼容旧版浏览器，可使用 Babel 编译或降级为传统函数写法。
综上，善用现代 JavaScript 特性和语义化 DOM API，不仅能写出更短的代码，更能提升逻辑清晰度与长期可维护性。
