jQuery Событие, когда все выбранные внутри div были изменены

Question

Если у вас есть несколько вариантов, как я могу запустить функцию jquery, когда все выбранные изменения изменились, а не только первый, который я выбрал?

У меня есть этот 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> 

С помощью этой функции JQuery:

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

, но это срабатывает предупреждение только при изменении первого выбора, и я хочу сделать это, как только все выбирает внутри команды контейнер изменил его значение, а i, когда возвращается к умолчанию в любой функции выбора, запускает другую функцию, был ли я достаточно ясным?

заранее спасибо

Answer 1

Измените свой JQuery код следующим образом:

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

}); 

Здесь работает fiddle.

Скажите, если это сработало.

Счастливое кодирование.

Answer 2

когда класс добавляется к нескольким элементам его событие переплетено к каждому элементу и класс работает для всех. просто дать общий класс для всех ваших выбрать, на котором вы хотите, чтобы огнь события

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

это работает для всех в select, который имеет класс talla1

Answer 3

Вы можете вести учет изменений на каждый select и использовании это значение, чтобы увидеть, изменены ли все 3.

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>