如何获取所选选项的值

Question

我正在尝试获取所选选项的值，但我不能，任何帮助：

我对 JavaScript 很陌生

非常感谢帮助。

这是我的代码

 btn = document.getElementById('submitbtn') btn.addEventListener('click', checkOverallRating); let overall = document.querySelector('select'); let overallValue = overall.options[overall.selectedIndex].text function checkOverallRating(e){ if (overall == 0) { alert(overallValue); e.preventDefault(); } else { alert(overallValue); e.preventDefault(); } }

 <select method="POST" 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">Excceds Target</option> <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>

Answer 1

让 answer = document.querySelector('#OverallRating').value;

Answer 2

原因是下面的代码片段在checkOverallRating()之外，它会在您的页面加载后执行，并且无论您选择哪个选项都保持不变 select

    let overall = document.querySelector('select');
    let overallValue = overall.options[overall.selectedIndex].text

为了使其按预期工作，您需要将它们放在checkOverallRating()中

 <form> <select method="POST" 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">Excceds Target</option> <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> </form> <script> btn = document.getElementById('submitbtn') btn.addEventListener('click', checkOverallRating); function checkOverallRating(e){ let overall = document.querySelector('select'); let overallValue = overall.options[overall.selectedIndex].text if (overall == 0) { alert(overallValue); e.preventDefault(); } else { alert(overallValue); e.preventDefault(); } } </script>

Answer 3

在用户选择任何内容之前，您会在加载页面后立即读取所选值。

在用户选择某些内容之前，不要尝试读取所选值。 例如在您的按钮单击处理程序中：

 btn = document.getElementById('submitbtn') btn.addEventListener('click', checkOverallRating); function checkOverallRating(e){ // move these two lines into the function... let overall = document.querySelector('select'); let overallValue = overall.options[overall.selectedIndex].text if (overall == 0) { alert(overallValue); e.preventDefault(); } else { alert(overallValue); e.preventDefault(); } }

 <select method="POST" 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">Excceds Target</option> <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>

顺便说一句...您的if语句没有意义，因为 HTML 元素 object 永远不会等于0 。 但好消息是if语句也完全没有必要，因为在这两种情况下您都在做同样的事情。 所以只需删除它：

 btn = document.getElementById('submitbtn') btn.addEventListener('click', checkOverallRating); function checkOverallRating(e){ // move these two lines into the function... let overall = document.querySelector('select'); let overallValue = overall.options[overall.selectedIndex].text alert(overallValue); e.preventDefault(); }

 <select method="POST" 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">Excceds Target</option> <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>

Answer 4

您应该获取 select 输入的 ID，它将返回所选选项的值

document.getElementById(OverallRating).value;