如何获取select选中选项的值？JavaScript新手求助

你的代码存在几个关键问题，导致无法正确获取下拉选择框的选中值：

• 获取选中值的时机错误：你在页面加载时就赋值了overallValue，这只会获取初始选中的选项文本，不会随用户后续的选择更新。必须在按钮点击事件内部实时获取当前选中值。
• 条件判断逻辑错误：if (overall == 0)是把DOM元素和数字0做比较，永远不会成立，应该判断下拉框的value或者selectedIndex。
• 冗余分支逻辑：两个分支执行完全相同的代码，完全可以简化。

修正后的代码 #

JavaScript 代码 #

const btn = document.getElementById('submitbtn');
btn.addEventListener('click', checkOverallRating);
const overall = document.querySelector('select');

function checkOverallRating(e) {
  // 实时获取当前选中的value值和文本内容
  const selectedValue = overall.value;
  const selectedText = overall.options[overall.selectedIndex].text;
  
  // 判断是否选择了默认提示选项
  if (selectedValue === '0') {
    alert('请选择有效的评分');
  } else {
    alert(`选中的评分值：${selectedValue}，文本：${selectedText}`);
  }
  e.preventDefault();
}

HTML 代码 #

<select name="OverallRating" id="OverallRating" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option value="0" selected>Select the desired Overall Rating</option>
  <option value="5">Outstanding Performance</option>
  <option value="4">Exceeds Target</option>
  <!-- 修正原代码中"Excceds"的拼写错误 -->
  <option value="3">Meets Target</option>
  <option value="2">Partially Meets Target</option>
  <option value="1">Needs Improvement</option>
</select>
      
<button type="submit" id="submitbtn">Submit</button>

关键说明 #

• 使用overall.value可以直接获取选中选项的value属性值，比通过selectedIndex获取更简洁。
• 将获取选中值的代码放在点击事件内部，确保每次点击都能拿到最新的选择结果。
• 修正了原HTML中"Excceds"的拼写错误（正确应为Exceeds）。

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