Call a function when select box changes its value and when remains same

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

现在我想这会很好用......