Jquery 不带表单的下拉列表验证

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

见

---

希望这有帮助。

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

---

是的，你提到的一切都是可能的。将单击事件绑定到按钮，并用jQuery检查select的值。您能澄清一下吗？我是jq的新手……奇怪，它在你的演示中起作用，但在我的网站上不起作用，你认为jquery版本可能与之有关吗？我的网站目前使用的是1.7.1.min，而不是你的演示中的1.9.1？？？？？我在抓救命稻草；。。。如果一个页面上有多个产品，那么这将不起作用，因为您的选择器将获得所有产品选项只有我第二次使用stack overflow…team viewer是什么或在哪里？是的，我确实有多个产品在页面上，事实上，这一想法确实在我脑海中出现过，因此，我在第一个问题中提到：我在这个商店里有几个产品，每个产品都有一个列表元素，每个产品都有自己的“添加到购物车”按钮。@NikolaMitev现在我在inspector jquery-1.7.1.min.js中发现一个错误：3Error:语法错误，无法识别的表达式：它并没有做你的演示正在做的事情，所以我的代码在其他地方有些混乱。是的，这对我也不起作用。它所做的是将产品添加到购物车中，包含除尺寸以外的所有信息。在它将产品添加到购物车中之前，它是未定义的，并且您正在使用的js中没有显示任何错误

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

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