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>

String.prototype.trim=函数（）{
返回此值。替换（/^\s+|\s+$/g，”）；
}
函数payNow（）
{
var freeColor=document.checkout.free\u prod\u color；
var-colorCount=0；
var-sizeCount=0；
对于（变量j=0；j=1）{
警告（“请选择免费产品的颜色”）；
返回false；
}
}
马克斯衬衫
选择颜色
2蓝色军团绿芦笋孟加拉虎斑黑粉蓝色灰蓝色豹子伪装2蓝色伪装绿炭梦幻般的蓝色火焰心花灰猎人绿翡翠宝石马赛克桃金娘橄榄露珠紫色品红色浆果漩涡银黄色绿色梦
选择SizeXLM
1.
自由的
自由的

提前感谢,

---

Prasath.

请不要使用相同的Id。 使用jQuery和chage函数可以：

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;
}

---

ID必须是唯一的！不能在同一文档中多次使用同一ID。您需要使用类或名称。谢谢您的回复，但名称和id属性应该相同…不是唯一的