0

我有以下 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>

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

我怎样才能做到这一点？

4

2 回答 2

5

根据需要更改以下代码。只需遍历适当的元素，如果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元素，但这超出了本问题的范围。

于 2013-03-14T18:14:25.290 回答
1

试试这个：也在这个小提琴中：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>
于 2013-03-14T18:21:50.723 回答