[英]jQuery Event when all selects inside a div have changed
如果一個有多個選擇,當所有選擇都改變了而不僅僅是我選擇的第一個選擇時,我該如何運行一個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');
});
但這僅在更改第一個選擇時觸發警報,並且一旦容器中的所有選擇都更改了值,我想這樣做,並且在任何選擇中返回默認值時運行其他功能,我是否足夠清楚?
提前致謝
您可以記錄每個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>
當將一個類添加到多個元素時,其事件將綁定到每個元素,並且該類適用於所有元素。 只需為要觸發事件的所有選擇提供一個通用類
<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>
這適用於所有具有talla1
類的select
將您的jquery代碼更改為此:
$(".talla1").each(function(){
$(this).change(function(){
//alert('called');
$(this).addClass('active');
if($(".container").find('.active').length == $(".talla1").length){
alert('finish');
}
});
});
這是工作中的小提琴 。
告訴它是否有效。
編碼愉快。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.