Sudarshan Kalebere Sudarshan Kalebere - 3 months ago 7
HTML Question

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

I have multilpe select dropdowns and all have same class, I want to trigger a function on change of any of select dropdown and also trigger a another function when the values are remains unchanges.

Suppose I have 3 dropdowns user changes any one dropdown option then I need to call a function, in the same way if user keeps options back to unchanged then I need to call another function. For example I have 3 dropdowns user comes and changes first dropdown to redeem offer then I will call a function but if that user keeps same value which initially that dropdown had say select offer then I need to call a function.

here is what I tried so far

JS code

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


Here is what I have in my 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>


So basically if any one of above dropdown value changes then I will call stsChanged function else if values of all three dropdown remains same then I will trigger stsUnChanged(). Can anybody help me with this? Thanks in advance.

Fiddle to try Fiddle

Answer

You just need to check if any of the 3 select has not the default value

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

see this JSFIDDLE


Update

If your default value is variable you can set a data attribute with that value (also make sure to set the selected attribute to the correct option), like this:

<select name="" data-default-value="Open" class="gift-sts" id="gift_!">
   <option value="Open" selected >Open</option>

then in jQuery just compare the current value with the default one:

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

that's it! DEMO

Comments