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');
});

但是这只在更改第一个选择时触发警报，并且我想在容器内的所有选择都更改其值后执行此操作，并且当在任何选择运行其他函数时返回默认值时，我是否足够清楚？

提前致谢

Answer 1

您可以记录每个select的更改，并使用该值查看是否所有3都已更改。

＆＃13;

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');
});

＆＃13;

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

＆＃13;

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

将您的jquery代码更改为：

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

});

这是工作fiddle。

告诉它是否有效。

快乐编码。

当div中的所有选择都发生了变化时，jQuery事件

3 个答案: