没有表单的下拉列表验证

Question

好的，我一直在研究下拉列表表单验证，但找不到任何符合我要求的内容。我的下拉列表是列表元素的一部分，而不是表单元素，我的提交按钮是“添加到购物车”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>

Answer 1

见demo

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

希望这会有所帮助。

Answer 2

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

jsFiddle Demo

$('.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');
    }
})