Question

<select>列中约有6-7个<table>项。要按Submit按钮，条件是应选择所有<select>个项目。那么如何使用Javascript来完成...？

示例代码似乎是这样的：

         <table>
 <tr>
    <td><select name="name1" style="width: 90px; height: 20px"> 
                            <option value = "--" >--</option>
                <option value = "10" >10</option>
         </select>
     </td>
    </tr>
<tr>
    <td><select name="name2" style="width: 90px; height: 20px">
                            <option value = "--" >--</option> 
                <option value = "20" >20</option>
                </select>
     </td>
    </tr>
<tr>
    <td><select name="name3" style="width: 90px; height: 20px"> 
                            <option value = "--" >--</option>
                <option value = "30" >30</option>
                </select>
    </td>
    </tr>
  </table>

Answer 1

<table id="mytable">
  <tr>
    <td>
      <select name="name1" style="width: 90px; height: 20px">
        <option value = "--" >--</option>
        <option value = "10" >10</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select name="name2" style="width: 90px; height: 20px">
        <option value = "--" >--</option>
        <option value = "20" >20</option>
     </select>
    </td>
  </tr>
  <tr>
    <td>
      <select name="name3" style="width: 90px; height: 20px">
        <option value = "--" >--</option>
        <option value = "30" >30</option>
      </select>
    </td>
  </tr>
</table>

<form action="" method="post" onsubmit="if(!check()) return false;">
  <input type="submit" />
</form>

<script type="text/javascript">
function check() {
  elements=document.getElementById("mytable").getElementsByTagName("select");
  for(i=0;i<elements.length;i++){
    if(elements[i].value == "--") { return false; }
  }
  return true;
}
</script>

Answer 2

一种选择是使用jQuery validation plugin，然后在所有选择字段中添加“必需”。

<form id="my_form">
    <select name="select1" class="required"> ... </select>
    <select name="select2" class="required"> ... </select>
    <select name="select3" class="required"> ... </select>
    ....
</form>

然后javascript就像 -

一样简单

$('#my_form').validate();

使用插件所需要做的就是在页眉中包含jQuery和jQuery验证脚本

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
    ....
</head>

更新

显然你的要求非常简单，并且在你的网站上为这个用例添加一个完整的js库绝对是过度杀戮。如果这是您要做的唯一验证，我建议使用纯js解决方案（例如polin的答案）。但是，如果您的网站上可能有进一步的验证要求，则jQuery验证插件非常强大。

Answer 3

       var arr=new Array();
   status=true;
   function fnc()
   {
       elements=document.getElementById("atable").getElementsByTagName("option");
       for(i=0;i<elements.length;i++)
       {
           arr=elements[i].value;
           if(Number(arr)=='NaN')
            {
                status=false;
                break;
            }

           console.log(Number(arr));
    }
    if(status==true)
    document.getElementById("formname").submit();
    }

你也给你的表一个id

<table id="atable">

如何在javascript中验证选择项组

3 个答案: