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

没有表单的下拉列表验证

2 个答案: