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

动态下拉框验证

1 个答案: