JavaScript 验证选择列表

Question

我花了几天时间研究这个(包括查看这个网站)，但我不明白如何做到这一点。

我正在尝试让 JavaScript 验证是否选择了默认空白选择之外的某些内容。

每次代码到达选择列表时，它都会弹出窗口警报，但不会检查是否已选择任何内容。即使我选择了某些内容，也会弹出警报消息，然后继续执行代码，以便从未填写的字段中弹出其他错误警报。

我想让它知道是否选择了某些内容。如果是则没有错误消息。如果没有选择任何内容，那么我希望只显示此警报消息。

这是与此列表相关的 Javascript 函数(在 header 中)

function selectB() {
    x = 0;

    if (document.getElementById("mSQ").checked) {
        x++;
    }

    if (document.getElementById("pSQ").checked) {
        x++;
    }

    if (document.getElementById("cSQ").checked) {
        x++;
    }

    if (x == 0) {
        window.alert('You must select a Security Question');
        mSQ.focus();
        return false;
    }
}

这是 HTML

    <p>Please Select a Security Question from the Drop Down List.<br />
    <select name = "Security Question">
        <option value = "d" id = "default" ></option>
        <option value = "m" id = "mSQ" >What is your Mother's maiden name?</option>
        <option value = "p" id = "pSQ" >What is the name of your pet?</option>
        <option value = "c" id = "cSQ" >What is your favorite color?</option>
    </select></p>

请帮忙，我已经被这个问题困扰了很长时间了。

Answer 1

.checked 用于复选框和单选按钮。它不用于选择选项。您可以使用 .value 来获取所选选项的值。

用途:

var sec_question = document.getElementByName('Security Question')[0];
if (sec_question.value == 'd') {
    window.alert('You must select a Security Question');
    sec_question.focus();
    return false;
}

您还可以使用 HTML5 required 属性，以便浏览器自动执行检查。要使用此功能，默认选项应具有空值。

<p>Please Select a Security Question from the Drop Down List.<br />
<select name = "Security Question" required>
    <option value = "" id = "default" ></option>
    <option value = "m" id = "mSQ" >What is your Mother's maiden name?</option>
    <option value = "p" id = "pSQ" >What is the name of your pet?</option>
    <option value = "c" id = "cSQ" >What is your favorite color?</option>
</select></p>