如果多个选项值为空，如何显示警报答案

【问题标题】：How to show alert if multiple option values are empty如果多个选项值为空，如何显示警报
【发布时间】：2013-03-14 18:11:26
【问题描述】：

我有以下 HTML 和 Javascript，但无法正常工作：

<select id="shirtinfo[0]" name="shirtinfo[0]">
    <option value="">Confederation</option>
    <option value="6770">Europe (UEFA)</option>
    <option value="16272">South America (CONMEBOL)</option>
    <option value="21684">Africa (CAF)</option>
    <option value="21771">North &amp; Central America (CONCACAF)</option>
    <option value="18091">Asia (AFC)</option>
    <option value="19193">Oceania (OFC)</option>
</select>
...
<select id="season" name="season">
    <option value="">Season</option>
    <option value="2013">2013</option>
    ...
</select>
...
<input id="submit" type="submit" value="[[Save:raw]]" onclick="validate()" />

<script>
function validate() {
    if  (document.querySelectorAll("#shirtinfo[0], #shirtinfo[1], #shirtinfo[2], #shirtinfo[3], #shirtinfo[4], #season, #style, #status").value)
        {
            alert("[[Please enter the mandatory fields]]");
            return false;
        }
}
</script>

所有第一个选项值都是空的，只有标题，如果没有选择任何选项，则会显示警报。所以用户需要从列表中选择至少不是第一个选项的其他内容。

我该怎么做？

【问题讨论】：

标签： javascript jquery select input

【解决方案1】：

根据需要更改以下代码。只需遍历适当的元素，如果select 的值为空，则根据需要进行中断和处理。

function validate() {
    "use strict";
    var selectEls = document.querySelectorAll('select'),
        numSelects = selectEls.length;

    for(var x=0;x<numSelects;x++) {
        if (selectEls[x].value === '') {
            alert('[[Please enter the mandatory fields]]');
            return false;
        }
    }

    // If the code execution reaches this point, all the tests pass
    // ...
}

代码可以改进，例如，如果你想继续循环遍历所有元素，并突出显示问题select元素，但这超出了本问题的范围。

【讨论】：

您好，感谢您的回答，但我怎样才能将它用于页面中的一些 id。因为我认为这会通过它找到的所有选择？编辑：我很愚蠢，没有看到 querySelectorAll，抱歉
很高兴我能帮上忙。只需修改 querySelectorAll （就像您在原始问题中所做的那样），它应该可以正常工作。
您好，不幸的是，由于某种原因，它对我不起作用，下面的答案是。可以是什么？
正如您在回答中提到的，我想知道如何突出显示有问题的选择元素？喜欢高光淡入淡出效果？

【解决方案2】：

试试这个：也在这个小提琴中：http://jsfiddle.net/9f76X/

<select id="shirtinfo" name="shirtinfo[0]">
    <option value="">Confederation</option>
    <option value="6770">Europe (UEFA)</option>
    <option value="16272">South America (CONMEBOL)</option>
    <option value="21684">Africa (CAF)</option>
    <option value="21771">North &amp; Central America (CONCACAF)</option>
    <option value="18091">Asia (AFC)</option>
    <option value="19193">Oceania (OFC)</option>
</select>
...
<select id="season" name="season">
    <option value="">Season</option>
    <option value="test">test</option>
</select>
...
<input id="submit" type="submit" value="[[Save:raw]]" onclick="return validate();" />

<script type="text/javascript">
    function validate() {
    var controls, cnt, showAlert;
    controls = document.querySelectorAll("#shirtinfo,#season");

    for (cnt=0;cnt < controls.length; cnt++)
    {
        if (!controls[cnt].value) 
        {
            showAlert = true;
            break;
        }
    }

    if (showAlert) {
        alert("[[Please enter the mandatory fields]]");
    }
    return !showAlert;
}

</script>

【讨论】：