JavaScript 验证 Select 列表

Question

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

我正在尝试获取 JavaScript 来验证某些东西是 selected 而不是默认的空白 selection。

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

我想让它知道是否有东西被 selected。如果是，则没有错误消息。如果什么都没有 selected 那么我希望只显示这条警告消息。

这是与此列表相关的 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

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

// 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 用于复选框和单选按钮。它不用于 select 选项。您使用 .value 获取 selected 选项的值。

使用：

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>

主要区别

我正在检查 select 的值，而不是选项的 "checked" 状态
我是 selectingbyId，浏览器很早就对 ID 进行了索引（不确定名称）
我正在检查是否缺少值，而不是检查值是否等于 3 种情况之一。（cleaner/easier 阅读）

JavaScript 验证 Select 列表

JavaScript Validate Select List

javascript

forms

validation

select

主要区别