JavaScript 验证选择列表

Question

我花了几天的时间研究这个（包括查看这个网站），但我不明白该怎么做。

我正在尝试让 JavaScript 验证是否选择了默认空白选择以外的其他内容。

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

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

这是与此列表有关的 Javascript 函数（在标题中）

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

为select 元素上的change 事件添加事件监听器。让该处理程序简单地检查select 元素的selectedIndex（> 0 => 某些东西被选中）。对 form 的 submit 事件执行相同的操作，select 元素所在的位置。

// assign handlers
document.querySelector('#sq').addEventListener('change', check);
document.querySelector('#testform').addEventListener('submit', check);

function check(e) {
  var selector = document.querySelector('#sq');
  Helpers.logClear();
  Helpers.log2Screen('<b>', 
                     selector.selectedIndex > 0 
                       ? 'Selection ok' 
                       : 'Please <i>do</i> select an option', 
                     '</b> (from ', 
                     /form/i.test(this.nodeName) ? 'submit' : 'change', 
                     ')');
  return selector.selectedIndex > 0;
}

function submit() {
  Helpers.log2Screen('we are ok');
}

<script src="http://kooiinc.github.io/JSHelpers/Helpers-min.js"></script>
<form id="testform">
  Please Select a Security Question from the Drop Down List.<br />
  <select id="sq" name = "Security_Question">
    <option value = "d"> </option>
    <option value = "m">What is your Mother's maiden name?</option>
    <option value = "p">What is the name of your pet?</option>
    <option value = "c">What is your favorite color?</option>
  </select>
  <input type="submit" value="submit" />
</form>

Answer 2

.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>

Answer 3

你真正要找的是看看 select 是否有值。

这是您的代码的修改版本。

<p>Please Select a Security Question from the Drop Down List.<br />
    <select name = "Security Question" id="securityQuestion">
        <option></option>
        <option value="m">What is your Mother's maiden name?</option>
        <option value="p">What is the name of your pet?</option>
        <option value="c">What is your favorite color?</option>
    </select>
    <input type="button" value="Click to Check" onClick="checkDropdown(1)" />
</p>

<script>
    function checkDropdown () {
    var securityQuestionElement = document.getElementById('securityQuestion');
    if(!securityQuestionElement.value) {  
        window.alert('You must select a Security Question');  
        securityQuestionElement.value = 'm'
        return false;  
    }
}
</script>

主要区别

• 我正在检查选择的值，而不是选项的“已检查”状态
• 我正在选择byId，浏览器很早就索引了Ids（不确定按名称）
• 我正在检查是否缺少值，而不是该值是否等于 3 种情况之一。 （更简洁/更易于阅读）