Wenn ich mehrere Auswahlen habe, wie kann ich eine Abfragefunktion ausführen, wenn sich alle Auswahlen geändert haben und nicht nur die erste, die ich auswähle?

Ich habe dieses 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>

Mit dieser jQuery-Funktion:

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

Aber dies löst die Warnung nur aus, wenn die erste Auswahl geändert wird und ich dies tun möchte, sobald alle Auswahlen im Container ihren Wert geändert haben und wenn ich in einer Auswahlfunktion auf eine andere Funktion zurückgreife, war ich klar genug?

Danke im Voraus

0
antekera 14 Aug. 2015 im 09:29

3 Antworten

Beste Antwort

Ändern Sie Ihren Abfragecode wie folgt:

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

});

Hier ist die funktionierende Geige.

Sagen Sie, ob es funktioniert hat.

Viel Spaß beim Codieren.

0
Abhishek 14 Aug. 2015 im 06:50

Wenn eine Klasse mehreren Elementen hinzugefügt wird, wird ihr Ereignis an jedes Element gebunden und die Klasse funktioniert für alle. Geben Sie einfach allen ausgewählten Personen, auf die Sie ein Ereignis auslösen möchten, eine gemeinsame Klasse

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

Dies funktioniert für alle select mit der Klasse talla1

0
Meenesh Jain 14 Aug. 2015 im 06:37

Sie können Änderungen an jedem select aufzeichnen und diesen Wert verwenden, um festzustellen, ob alle 3 geändert wurden.

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>
2
RRK 14 Aug. 2015 im 06:52