javascript - 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 试试Fiddle

Answer 1

你只需要检查3个select中是否有一个不是默认值

$(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