动态操作下拉框，轻松添加选项与获取值

• 基础写法：let select = document.getElementById('mySelect');
  let opt = document.createElement('option');
  opt.value = 'value1';
  opt.textContent = '显示文字1';
  select.appendChild(opt);
• 一行简写（适合简单场景）：select.add(new Option('显示文字2', 'value2')); —— add() 方法接受 Option 实例，IE9+ 支持
• 批量添加数组数据：['苹果', '香蕉', '橙子'].forEach(text => { select.add(new Option(text, text.toLowerCase())); });

获取选中值和文本的正确方法

别只依赖 select.value，它只返回 value 属性值；如需显示文字，得读 select.options[select.selectedIndex].text。

• 获取选中值：select.value（最常用，自动对应选中项的 value）
• 获取选中文本：select.options[select.selectedIndex]?.text || ''（加可选链防报错）
• 多选下拉（multiple）时：Array.from(select.selectedOptions).map(opt => opt.value) 得到所有选中值的数组

监听选择变化的推荐写法

用 change 事件，不是 click 或 input —— 它在用户真正切换选项后才触发，语义准确。

• 绑定方式：select.addEventListener('change', () => { console.log('当前值：', select.value); });
• 注意：动态添加选项后，无需重新绑定事件——事件委托天然生效，只要监听对象没变
• 如果下拉框初始为空，添加完选项后可手动触发一次：select.dispatchEvent(new Event('change'));（用于初始化逻辑）

基本上就这些。关键是理解 select 是表单元素，它的 value 和 selectedIndex 是实时同步的，操作 options 集合就是操作界面本身。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。