2016-04-14 10 views
0

選択変更でvariationCheck関数をトリガしようとしましたが、関数がトリガされる前に両方の選択オプションを最初に選択できる方法はありますか?複数選択オプションを変更した後のjQueryトリガイベント

検証が少しうまくいくようですが、ユーザーが検証後に選択オプションを変更することを何度も繰り返すことができます。私はこれが理にかなってほしい。

助けがあれば助かります!ありがとう。私は考えることができる

<table class="variations" cellspacing="0"> 
    <tbody> 
     <tr> 
      <td class="label"> 
       <label for="covers">Covers</label> 
      </td> 
      <td class="value"> 
       <select id="covers" class="" name="attribute_covers" data-attribute_name="attribute_covers"> 
        <option value="" selected="selected">Choose an option</option> 
        <option value="5" class="attached enabled">5</option> 
        <option value="6" class="attached enabled" selected="selected">6</option> 
        <option value="7" class="attached enabled">7</option> 
        <option value="8" class="attached enabled">8</option> 
        <option value="9" class="attached enabled">9</option> 
        <option value="10" class="attached enabled">10</option> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td class="label"> 
       <label for="extras">Extras</label> 
      </td> 
      <td class="value"> 
       <select id="extras" class="" name="attribute_extras" data-attribute_name="attribute_extras"> 
        <option value="" selected="selected">Choose an option</option> 
        <option value="Fruit" class="attached enabled">Fruit</option> 
        <option value="Cake" class="attached enabled">Cake</option> 
       </select><a class="reset_variations" href="#" style="visibility: visible;">Clear</a> </td> 
     </tr> 
    </tbody> 
</table> 
+0

あなたのhtmlを表示すると、簡単になります – Harish

答えて

1

一つの方法は、選択要素の両方の値をチェックし、両方が選択されている場合、検証メソッドを呼び出すことです

Screenshot

JS

$("select[name=attribute_covers],select[name=attribute_extras]").change(function(){ 
      var get_product_id = $(this).closest('form').data('product_id').replace('form_',''); 
      variationCheck(get_product_id); 
     }); 

     function variationCheck(get_product_id) { 
      for (var i = 0; i < variationArray.length; i++) { 
       if (variationArray[i].product_id === get_product_id) { 
        alert(get_product_id); 
       }; 
      }; 
     }; 

HTML:

$("select[name=attribute_covers],select[name=attribute_extras]").change(function(){ 
      var get_product_id = $(this).closest('form').data('product_id').replace('form_',''); 
      if($("select[name=attribute_covers]").val() != "" && $("select[name=attribute_extras]").val() != ""){ 
      variationCheck(get_product_id); 
      } 
     }); 

     function variationCheck(get_product_id) { 
      for (var i = 0; i < variationArray.length; i++) { 
       if (variationArray[i].product_id === get_product_id) { 
        alert(get_product_id); 
       }; 
      }; 
     }; 
関連する問題