如何在用户选择后获取select元素的选中值？

当然可以在用户选择选项后获取select的选中值，但你当前使用的select事件并不适用——这个事件是针对文本输入类元素（如<input>、<textarea>）选中文本时触发的，和<select>的选项切换无关。

正确的事件绑定方式 #

1. 使用change事件（推荐） #

当用户切换选项并确认（比如点击选项、按回车）时触发，适合大多数场景：

<select id="targetSelect">
  <option value="test1">test1</option>
  <option value="test2">test2</option>
</select>

<script>
const select = document.getElementById('targetSelect');
select.addEventListener('change', () => {
  const selectedValue = select.value;
  console.log('选中值：', selectedValue);
  
  // 在这里根据选中值处理表单提交前的项目加载逻辑
  // 示例：加载对应项目
  // loadAndDisplayProject(selectedValue);
});
</script>

2. 使用input事件（即时响应） #

如果需要在用户用键盘上下键切换选项时就即时触发（无需确认），可以用input事件：

select.addEventListener('input', () => {
  console.log('实时选中值：', select.value);
});

额外：获取选中的option元素细节 #

如果需要拿到选中项的文本或其他属性，可以通过selectedOptions获取对应的<option>元素：

select.addEventListener('change', () => {
  const selectedOption = select.selectedOptions[0];
  console.log('选中值：', selectedOption.value);
  console.log('选中文本：', selectedOption.textContent);
});

你可以在事件回调中拿到选中值后，执行项目加载和显示的逻辑，比如动态渲染页面内容、发起数据请求等，从而在表单提交前完成对应项目的展示。

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