如何显示警告如果多个选项的值是空

Question

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

所有的第一个选项的值是空的，只是称号，并警告会如果没有选择任何选项，则显示。所以用户需要从列表中选择至少一些不是第一种选择的东西。

我该怎么做？

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

Answer 2

根据需要更改以下代码。只需循环正确的元素，并且如果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元素，但是这超出了这个问题的范围。