多个select上的jquery .change()一直在触发

时间:2016-11-11 18:41:37

标签: jquery

我试图从多选元素中获取所选值,如果只选择了单个选项,则执行AJAX调用。问题是,如果选择了除default之外的任何选项,.change()将继续触发。这是我的代码:



jQuery(document).ready(function($) {
  $('.pwpus-field-loop-post-types').each(function() {

    var div = $(this).parent().siblings('.taxos-block');
    var ajaxImage = $(this).siblings('.pwpus-field-loop-taxoloader');

    $(this).change(function() {
      var sel = $(this).find('option').filter(':selected');
      //Log length
      console.log(sel.length);

      if (sel.length == 1 && $(sel).attr('value') != 'all') {

        $(div).css({
          'opacity': 0
        });
        $(ajaxImage).fadeIn();

        var data = {
          'action': 'pwpus_loop_taxes',
          'type': $(this).val(),
          'name': $(this).attr('data-fieldname'),
        };

        $.post(ajaxurl, data, function(response) {
          $(ajaxImage).fadeOut(function() {
            $(div).html(response).css({
              'opacity': 1
            });
            $(document).trigger('typetaxesdisplayed');
          });
        });
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pwpus-field-loop-inner-wrap">
  <div class="pwpus-field-loop-single-field">
    <select name="scattrloop[post_type][]" class="pwpus-field-loop-post-types" data-fieldname="scattrloop" multiple="multiple">
      <option value="all" selected="selected" class="selectall optionselected">All</option>
      <option value="post">Posts</option>
      <option value="pwpreviews">Reviews</option>
      <option value="deals">Deals</option>
    </select>
    <img class="pwpus-field-loop-taxoloader" src="/admin/assets/images/ring.gif">
  </div>
  <div class="pwpus-field-loop-single-field taxos-block"></div>
</div>
&#13;
&#13;
&#13;

如果我选择除“全部”之外的任何其他选项,我的firebug控制台就会变得混乱。我不知道我做错了什么。在这里尝试了几个答案,比如在调用之前取消绑定更改事件,甚至使用.off()

请帮忙。

0 个答案:

没有答案