1

OK、ドロップダウン リスト フォームの検証について調べていますが、探しているものを見つけることができません。ドロップダウン リストはフォーム要素ではなくリスト要素の一部であり、送信ボタンは「カートに追加」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

1

前の選択リストを取得するには、 jQuery の prevメソッドをselect使用しての値を確認する必要があります。以下のコードは、最初のオプション以外が選択されていることを確認します。

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 に答える