javascript - 动态下拉框验证

单击提交按钮时，需要动态下拉框的JavaScript验证。但是，所有下拉框的下拉框属性名称和ID应该相同。我尝试了下面的代码，但是没有成功，当有多个下拉框时，它可以很好地工作，但是只有一个下拉框时，它不起作用。请帮助我找出此问题，或在不更改属性名称和下拉框ID的情况下给我任何建议。

<script type="text/javascript">
String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
}
function payNow()
    {

    var freeColor = document.checkout.free_prod_color;
    var colorCount = 0;
    var sizeCount = 0;
    for(var j=0;j<document.checkout.free_prod_color.length;j++) {
    if(freeColor[j].value.trim()=="")  {
        colorCount++;
    }
    }
    if(colorCount>=1) {
        alert("Please select color for FREE product");
        return false;
    }
    }
  </script>
  <form name="checkout" action="checkout.jsp" method="post">
  <table>
  <tr class="free" title="Free Product">
  <td height="30" valign="top" class="list_cell">Max Shirt<input type="hidden" name="free_prod_name" value="Max Shirt" /></td>

  <td valign="top" class="list_cell">
  <select name="free_prod_color" id="free_prod_color">
  <option value="">Select Color</option>
  <option value="73">2Tone Blue</option><option value="74">Army Green</option><option value="75">Asparagus</option><option value="77">Bengal Tiger</option><option value="78">Black</option><option value="79">Black Pink</option><option value="80">Blue Gray</option><option value="81">Blue Leopard</option><option value="82">Camou</option><option value="83">Camou 2</option><option value="84">Camou Blue</option><option value="85">Camou Green</option><option value="86">Charcoal</option><option value="87">Dreamy Blue</option><option value="88">Flaming Heart</option><option value="89">Florence</option><option value="90">Gray</option><option value="91">Hunter Green</option><option value="97">Jade</option><option value="92">Leopard</option><option value="93">Mosaic</option><option value="94">Myrtle</option><option value="95">Olive</option><option value="96">Olive Dew</option><option value="98">Purple Pink</option><option value="99">Raspberry Swirl</option><option value="100">Silver</option><option value="101">Yellow Green Dream</option>

  </select>  </td>
  <td colspan="2" valign="top" class="list_cell" id="peeko_send_0"><select name="free_prod_size" id="free_prod_size"><option value="">Select Size</option><option value="">XL</option><option value="">M</option></select></td>
  <td valign="top" class="list_cell">&nbsp;</td>
  <td align="right" valign="top" class="list_cell">1&nbsp;</td>
  <td align="right" valign="top" class="list_cell">Free&nbsp;</td>
  <td align="right" valign="top" class="list_cell">Free&nbsp;</td>

</tr>

<!-- <tr class="free" title="Free Product">
  <td height="30" valign="top" class="list_cell">Maxim<input type="hidden" name="free_prod_name" value="Maxim" /></td>
  <td valign="top" class="list_cell">
  <select name="free_prod_color" id="free_prod_color">
  <option value="">Select Color</option>
  <option value="73">2Tone Blue</option><option value="74">Army Green</option><option value="75">Asparagus</option><option value="77">Bengal Tiger</option><option value="78">Black</option><option value="79">Black Pink</option><option value="80">Blue Gray</option><option value="81">Blue Leopard</option><option value="82">Camou</option><option value="83">Camou 2</option><option value="84">Camou Blue</option><option value="85">Camou Green</option><option value="86">Charcoal</option><option value="87">Dreamy Blue</option><option value="88">Flaming Heart</option><option value="89">Florence</option><option value="90">Gray</option><option value="91">Hunter Green</option><option value="97">Jade</option><option value="92">Leopard</option><option value="93">Mosaic</option><option value="94">Myrtle</option><option value="95">Olive</option><option value="96">Olive Dew</option><option value="98">Purple Pink</option><option value="99">Raspberry Swirl</option><option value="100">Silver</option><option value="101">Yellow Green Dream</option>

  </select>  </td>
  <td colspan="2" valign="top" class="list_cell" id="peeko_send_1"><select name="free_prod_size" id="free_prod_size"><option value="">Select Size</option><option value="">XL</option><option value="">M</option></select></td>
  <td valign="top" class="list_cell">&nbsp;</td>
  <td align="right" valign="top" class="list_cell">1&nbsp;</td>
  <td align="right" valign="top" class="list_cell">Free&nbsp;</td>
  <td align="right" valign="top" class="list_cell">Free&nbsp;</td>

</tr>
 --></table>
  <br><br>
  <input type="submit" name="aa2" alt="PayPal" value="Pay Now with PayPal" onclick="return payNow()" />
    </form>

提前致谢，

普拉萨

最佳答案

请不要使用相同的ID。
使用jQuery并将您的函数更改为：

function payNow()
{
    var sameEmpty = false;
    $("select").each(function() {
        if (this.value == "")
        {
            sameEmpty = true;
            break;
        }
    });

    if(sameEmpty) {
        alert("Please select color for FREE product");
        return false;
    }

    return true;
}

关于javascript - 动态下拉框验证，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/4603100/