動態下拉框驗證

Question

點擊提交按鈕時，我需要動態下拉框的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> 

由於事先

Prasath。

Answer 1

請不要使用相同的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; 
}