[英]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? 如果一个有多个选择,当所有选择都改变了而不仅仅是我选择的第一个选择时,我该如何运行一个jQuery函数?
I have this html: 我有这个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: 使用此jQuery函数:
$('.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 提前致谢
You can keep a record of changes on each select
and use that value to see if all 3 are changed. 您可以记录每个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>
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
这适用于所有具有talla1
类的select
Change your jquery code to this : 将您的jquery代码更改为此:
$(".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. 编码愉快。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.