JavaScript - 一种检查 选项是否有效的方法标签被选中

Question

我有一个选择标签，我想检查是否选择了飞蛾。

 <select name="Birth_Month">
    <option value="" SELECTED>- Month -</option>
    <option value="January">January</option>
    <option value="Fabruary">Fabruary</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>

所以这样做：

if (document.registration_form.Birth_Month.value === '') 
{
    alert('Please fill select Month!');
}

但是这个 JavaScript 对于某些 select-s 有效，而对于其中一些则无效。显然，当选择“- Month -”时，它返回“- Month -”而不是“”（空字符串）。我做错了什么？检查标签选择的最佳方法是什么？

Answer 1

浏览器并不总是有 的 .value 属性。 - 我们过去必须获取的值：

var birthMonth = document.registration_form.Birth_Month;
if (birthMonth.options[birthMonth.selectedIndex].value === '') {
  // something
}

我现在使用 jQuery .val()。我不记得哪些浏览器缺少 select.value 属性，也许这些浏览器太旧了，我们不需要再担心它们了。但 jQuery 不使用 select.value - 它循环遍历每个选项来查找所选选项的值。

当然，如果您知道第一个选项始终是一个空白选项，则只需检查 selectedIndex==0 即可。

Answer 2

我相信整数是选项值的更好实践。无论如何，下面的代码片段并不关心您的默认选项值是空字符串还是零值。

var birthMonth = document.registration_form.Birth_Month;
if(birthMonth.options[birthMonth.selectedIndex].value === false){
    alert('Please fill select Month!');
}

Answer 3

您不需要使用“selectedIndex”

<select name="Birth_Month">
        <option value="" SELECTED>- Month -</option>
        <option value="January">January</option>
        <option value="Fabruary">Fabruary</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="August">August</option>
        <option value="September">September</option>
        <option value="October">October</option>
        <option value="November">November</option>
        <option value="December">December</option>
    </select>
    
    if (document.getElementById('Birth_Month').value === '') 
    {
        alert('Please fill select Month!');
    }

或

<select name="Birth_Month">
    <option value="they_did_not_select_anything" SELECTED>- Month -</option>
    <option value="January">January</option>
    <option value="Fabruary">Fabruary</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>

if (document.getElementById('Birth_Month').value === 'they_did_not_select_anything') 
{
    alert('Please fill select Month!');
}