1

好的，我一直在研究下拉列表表单验证，但找不到任何符合我要求的内容。我的下拉列表是列表元素而不是表单元素的一部分，我的提交按钮是“添加到购物车”href。如果用户没有从“选择”组中选择大小选项，我正在寻找的是一种显示错误消息的方法。我在 jquery 代码中看到的所有其他内容都引用了一个表单，我是否可以只使用选择器的类而不是 id？并且只有当用户尝试单击“添加到购物车”时才会触发错误代码？注意：我在这家商店有几个产品，并且为每个产品设置了一个列表元素，每个产品都有自己的“添加到购物车”按钮。看我的html。我没有任何 jquery 代码，因为我到处都想做什么。

<li class="product" name="some dress" price="10" 
name1="some dress Size 6 (Option #1)" price1="10"
name2="some dress Size 8 (Option #2)" price2="10"
name3="some dress Size 10 (Option #3)" price3="10"
name4="some dress Size 16 (Option #4)" price4="10"> 

<a class="product-image" href="images/catalog/someimage.jpg" rel="prettyPhoto" title="some text about product">

<img src="images/catalog/someimage2.jpg" width="180px" height="150px" alt=""/>
<div class="text-overlay">
<p class="product-heading">some description:</p>
more description about product here
</div>
</a>
<p> <span class="product-heading">Designer:</span>some designer name</p>

<!-- options for buy button -->
<select class="product-options">
<option value="" selected disabled>Select</option>
<option value="1">Size 6</option>
<option value="2">Size 8</option>
<option value="3">Size 10</option>
<option value="4">Size 16</option>
</select>

<a href="#" class="product-buy" option="product-options">Add To Cart</a>
<div class="product-price"><span class="product-currency">$</span>10</div>
</li>
4

2 回答 2

2

查看演示

$(".product-buy").click(function()
                        {
                            var sel = $(this).prev().val();
                            if(sel=="" || sel==undefined)
                            {
                                alert("Please select size");
                                return false;
                            }
                        });

希望这可以帮助。

于 2013-05-30T20:56:17.300 回答
1

您需要select使用jQuery prev方法检查的值来获取上一个选择列表。下面的代码将确保选择除第一个选项之外的其他内容。

jsFiddle 演示

$('.product-buy').on('click', function(e) {
    e.preventDefault();
    var $size = $(this).prev('.product-options');
    if ($size[0].selectedIndex <= 0) {
        alert('Please select a size');
    } else {
        alert($size.find('option:selected').text() + ' added to cart');
    }
})
于 2013-05-30T21:08:05.133 回答