Question

我有多个选择下拉列表并且都有相同的类，我想在更改任何选择下拉列表时触发一个函数，并在值保持不变时触发另一个函数。

假设我有3个下拉用户更改任何一个下拉选项然后我需要调用一个函数，以同样的方式如果用户将选项保持不变然后我需要调用另一个函数。例如，我有3个下拉用户来，并更改第一个下拉列表以兑换优惠，然后我将调用一个函数，但如果该用户保持相同的值，最初该下拉列表说选择要约，那么我需要调用一个函数。

这是我到目前为止所尝试的内容

JS代码

$(document).ready(function(){
        $(".gift-sts").on('change', function() {
            if ($('.gift-sts').val() == 'Open'){
                stsUnChanged();
            } else {
               stsChanged();
            }
        });

      function stsChanged(){
            $('.save-order-sts').removeClass('btn-primary');
            $('.save-order-sts').addClass('btn-success');
            $('.save-order-sts').attr('disabled',false);    
      }
      function stsUnChanged(){
            $('.save-order-sts').addClass('btn-primary');
            $('.save-order-sts').removeClass('btn-success');
            $('.save-order-sts').attr('disabled',true);    
      }
    })

以下是我在html中的内容

<button class="save-order-sts">Save</button>

<select name="" class="gift-sts" id="gift_!">
   <option value="Open">Open</option>
   <option value="Redeem">Redeem</option>
   <option value="Cancel">Cance</option>
 </select>
 <select name="" class="gift-sts" id="gift_2">
   <option value="Open">Open</option>
   <option value="Redeem">Redeem</option>
   <option value="Cancel">Cance</option>
 </select>
 <select name="" class="gift-sts" id="gift_3">
   <option value="Open">Open</option>
   <option value="Redeem">Redeem</option>
   <option value="Cancel">Cance</option>
 </select>

所以基本上如果上面任何一个下拉值发生变化，那么我将调用stsChanged函数，如果所有三个下拉列表的值保持不变，那么我将触发stsUnChanged（）。任何人都可以帮我吗？提前致谢。

小提琴尝试Fiddle

Answer 1

您只需要检查3个选项中是否有任何一个没有默认值

$(document).ready(function(){
  $(".gift-sts").on('change', function() {
    var isChanged = selectChanged();
    isChanged ? stsChanged() : stsUnChanged();
  });

  //this function will check if any of the 3 select changed
  function selectChanged(){
   var changed = false;
    $('.gift-sts').each(function(){
        if ( $(this).val() !== "Open" ) changed = true;
    });
    return changed;
  }

  function stsChanged(){
    $('.save-order-sts').removeClass('btn-primary');
    $('.save-order-sts').addClass('btn-success');
    $('.save-order-sts').attr('disabled',false);    
  }
  function stsUnChanged(){
    $('.save-order-sts').addClass('btn-primary');
    $('.save-order-sts').removeClass('btn-success');
    $('.save-order-sts').attr('disabled',true);    
  }
});

请参阅此JSFIDDLE

更新

如果您的默认值是可变的，则需要将其存储在某处。您可以使用数据属性：

$('.gift-sts').each(function(){
  $(this).data("default-value", $(this).val());
});

然后将当前值与默认值进行比较：

if ( $(this).val() !== $(this).data("default-value") ) changed = true;

是的，那就是它！ UPDATED DEMO

Answer 2

您必须在回调中使用this而不是.gift-sts来引用该元素：

$(".gift-sts").on('change', function() {
    if( $(this).val() == 'Open' ) {
        stsUnChanged();
    } else {
        stsChanged();
    }
});

你知道你可以连锁行动吗？

function stsChanged() {
    $('.save-order-sts').removeClass('btn-primary')
                        .addClass('btn-success')
                        .attr('disabled', false);    
}

function stsUnChanged() {
    $('.save-order-sts').addClass('btn-primary')
                        .removeClass('btn-success')
                        .attr('disabled', true);    
}

Answer 3

问题是，你不能使用类名来获取下拉列表的值，因为你有多个具有相同类名的列表，所以你必须为每个列表使用id，或者你可以只需使用'this'关键字即可获取当前对象。所以代码就像，

if ($(this).val() == 'Open'){
        stsUnChanged();
   } else {
        stsChanged();
   }

现在这个工作正常我猜...

当选择框更改其值并且保持相同时调用函数

3 个答案: