выпадающий список валидации без формы

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

Для того, чтобы выбрать предыдущий выбранный список, вам нужно проверить значение select с помощью метода jQuery prev. В приведенном ниже коде убедитесь, что выбрано что-то, кроме первого.

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