CODEWITHSUNDEEP
javascriptjqueryhtml
antekera
antekera

Reputation: 7

jQuery Event when all selects inside a div have changed

If a have several selects how can i run a jquery function when all selects have changed and not just the first i choose?

I have this html:

<div class="container"> 
<select name="talla1" class="talla1">
    <option value="none">Select</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
</select>

<select name="talla2" class="talla1">
    <option value="none">Select</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
</select>

<select name="talla3" class="talla1">
    <option value="none">Select</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
</select> 
</div>

With this jQuery function:

$('.container select').change(function() {
    alert('changed');
});

but this fires the alert only when change the first select and i want to do it once all selects inside the container have changed its value and i when return to default in any select run other function, was i clear enough?

thanks in advance

Upvotes: 0

Views: 1113

Answers (3)

rrk
rrk

Reputation: 15846

You can keep a record of changes on each select and use that value to see if all 3 are changed. 

var eventArray = [];
$('.container select').on('change',function(){
    indexOfSelect = $('.container select').index( $(this) );
    if($.inArray(indexOfSelect, eventArray) == -1)
        eventArray.push( '' + indexOfSelect + '' );
    if(eventArray.length == $('.container select').length)
        alert('All changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <select name="talla1" class="talla1">
    <option value="none">Select</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
  </select>

  <select name="talla2" class="talla1">
    <option value="none">Select</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
  </select>

  <select name="talla3" class="talla1">
    <option value="none">Select</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
  </select>
</div>

Upvotes: 2

Abhishek
Abhishek

Reputation: 462

Change your jquery code to this :

$(".talla1").each(function(){
   $(this).change(function(){
     //alert('called');
    $(this).addClass('active');
    if($(".container").find('.active').length == $(".talla1").length){
            alert('finish');
       }
   });

});

Here is the working fiddle.

Do tell if it worked.

Happy Coding.

Upvotes: 0

Meenesh Jain
Meenesh Jain

Reputation: 2528

when a class is added to multiple elements its event is binded to every element and the class works for all. simply give a common class to all your select on which you want to fire a event 

 <script>
$(document).ready(function() {
    change_count = 0;
        $("select.talla1").on('change', function(event) {
            change_count++;
            if($("select.talla1").length == change_count){
                alert("all changed");
            }
        });
    });    
 </script>

this works for all the select which has class talla1

Upvotes: 0

Related Questions