jQuery Geschwister wählt keine Optionen innerhalb div?

Question

$('.input-group select').change(function() { 
 
    
 
    var value = $(this).val(); 
 
alert($('.input-group select').siblings('select').children('option').length); 
 
    $(this).siblings('select').children('option').each(function() { 
 
     if ($(this).val() === value) { 
 
      $(this).attr('disabled', true).siblings().removeAttr('disabled'); 
 
     } 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="input-group 1"> 
 
    <select name="select1"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 2"> 
 
    <select name="select2"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
    </select> 
 
</div>

I den folgenden Code und mochte Optionen innerhalb auszuwählen, wenn der Benutzer auswählen, damit in ersten Wert A auszuwählen, dass dieser Wert in der zweiten Auswahlfeld und inverse deaktiviert.

Ich fand Geschwister von jQuery, aber ich bin nicht in der Lage, es in div auszuwählen ... wo mache ich mich falsch?

Answer 1

Bitte versuchen Sie diese ...
Eine hier gemachte Annahme ist, dass es nur zwei select Boxen in dem HTML-Code, diese Funktionalität soll ausgelegt werden:

EDIT

$ = jQuery; 
 
$("#select1, #select2").on("change", function() { 
 
    if($(this).attr("id") == "select1"){ 
 
     src = "#select1"; target="#select2"; 
 
    } 
 
    else{ 
 
     src = "#select2"; target="#select1"; 
 
    } 
 

 
    $(target).children().removeAttr("disabled"); 
 
    $(target).find("option[value="+$(src).val()+"]").attr("disabled", "disabled"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group 1"> 
 
    <select id="select1"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 2"> 
 
    <select id="select2"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
    </select> 
 
</div>

Die jQuery wurde aktualisiert, um die in den Kommentaren geäußerten Bedenken zu beheben. Eine Annahme, die hier gemacht wird, besteht darin, dass die neuen Boxen auf ähnliche Weise zu den bestehenden hinzugefügt werden, d. H. Unter einer neuen <div class="input-group">. Daher wird gemäß dem angegebenen HTML-Layout die aktualisierte jQuery wäre:

$("select").on("change", function(){ 
    $(this).parent().siblings().find("option").removeAttr("disabled"); 
    $(this).parent().siblings() 
      .find("option[value="+$(this).val()+"]").attr("disabled", "disabled"); 
}); 

Vorschläge:

• Wickeln Sie den obigen Code in einem function und diese Funktion aufrufen, wenn eine neue select Box dynamisch hinzugefügt - wieder wird angenommen, dass es unter <div class="input-group"> hinzugefügt wird und dass es einen Elternteil <div> direkt über dem ersten solchen Element geben wird.

• Ändern <option>No Match</option> zu <option value="0">No Match</option> oder ähnlich.

Answer 2

Hier I im Testen dieses mit 4 Auswahlbox ... und ich bemerkte, als ich zum ersten Mal zwei Box-Wert auswählen, die in Auswahlbox Wert 3 & 4 nicht Auswahlen deaktivieren von 1 & 2 Auswahlbox ... Ich sehe das in Skript, wenn ich 10 Elemente hinzufügen ... für die ersten beiden wählen Sie Box funktioniert wie erwartet, aber für andere 3 & 4 nicht ... hier ist Code, der oben Dhruv Saxena.... wenn jemand bitte sehen, warum dies funktioniert nicht wie erwartet ... zum Beispiel müssen Sie wie beschrieben arbeiten:

Wählen Sie Box # 1 Test Selected Wählen Sie Box # 2 Test 2 Selected & Test is disa geblutet (Update Select Box # 1 Test 2 deaktiviert) 3 # Select-Box-Test 3 &-Test & Test2 deaktiviert (Update Select Box # 1 Test 2 & Test3 deaktiviert & Update Select Box # 2 Test 3 deaktiviert) Ausgewählte

Und So.so lautet der Wert, wenn das Element im aktuellen Auswahlfeld ausgewählt ist, um dieses Element in allen anderen Auswahlfeldern zu deaktivieren ...

$("select").on("change", function(){ 
 
    $(this).parent().siblings().find("option").removeAttr("disabled"); 
 
    $(this).parent().siblings() 
 
      .find("option[value="+$(this).val()+"]").attr("disabled", "disabled"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="input-group 1"> 
 
    <select id="1"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
     <option value="4">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 2"> 
 
    <select id="2"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
     <option value="4">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 3"> 
 
    <select id="3"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
     <option value="4">Test 3</option> 
 
    </select> 
 
</div> 
 

 
<div class="input-group 4"> 
 
    <select id="4"> 
 
     <option>No Match</option> 
 
     <option value="1">Test</option> 
 
     <option value="2">Test 2</option> 
 
     <option value="3">Test 3</option> 
 
     <option value="4">Test 3</option> 
 
    </select> 
 
</div>