Force dropdown, um nicht die gleichen Werte zu haben

Question

Ich habe zwei Dropdowns. Ein Dropdown-Menü für Produkt 1 und ein Dropdown-Menü für Produkt 2. Die Dropdown-Werte geben die Reihenfolge der Wichtigkeit an.

Zum Beispiel:

Für Artikel 1, wenn ich Auftrag wählen Sie 1, dann Drop-Down-Artikel 2 des sollten automatisch 2. (Ergebnis der Outcome A)

Wenn ich so eingestellt werden, wurde mit Artikel 2 und setzen Sie den Drop-Down-Wert starten 1 zu bestellen, sollte dann Drop-Down-Artikel 1 der automatisch 2. (Ergebnis der Outcome B)

bestellen

Ich habe ein Beispiel gefunden, bei dem die Werte im Dropdown-Menü deaktiviert wurden, sobald sie ausgewählt wurden. Ich schaue mir diese Art von Verhalten nicht an, da der Benutzer die Freiheit haben kann, seine Auswahl zurückzusetzen, deshalb brauche ich alle Werte, um jederzeit verfügbar zu sein.

Das Ereignis Change sollte einfach die richtigen Werte im entsprechenden Dropdown-Menü festlegen.

Bisher (ich habe nicht viel), habe ich die folgenden:

<select id="drp1" name="drp1" class="drp"> 
    <option value="1">Order 1</option> 
    <option value="2">Order 2</option> 
</select> 

<select id="drp2" name="drp2" class="drp"> 
    <option value="1">Order 1</option> 
    <option value="2">Order 2</option> 
</select> 

$("select.drp").on('change', function() { 
    var val = $(this).val(); 
    console.log(val); 

    //Figure out which dropdown triggered the change event. 
    //Let its current value selected but now change the dropdown that didn't triggere the change event with another value 
}); 

Answer 1

Ist das, was Sie meinen?

$("select.drp").on('change', function() { 
 
    
 
    var selectedDropDown = $(this).attr("id"); //get the ID of the currently selected drop down 
 
    
 
    var selectedValue = $(this).val(); //get the value of the currently selected drop down 
 
    
 
    var otherDropDown = (selectedDropDown == "drp1") ? "drp2" : "drp1"; //get the id of the other drop down 
 
    
 
    var otherValue = (selectedValue == 1) ? 2 : 1; //get the value that we want the other drop down to be 
 
    
 
    $("#" + otherDropDown).val(otherValue); //set the other drop down to the opposite of the current drop down. 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="drp1" name="drp1" class="drp"> 
 
    <option value="1">Order 1</option> 
 
    <option value="2">Order 2</option> 
 
</select> 
 

 
<select id="drp2" name="drp2" class="drp"> 
 
    <option value="1">Order 1</option> 
 
    <option value="2">Order 2</option> 
 
</select>

Answer 2

So ist die Logik.

auf Dokument bereit, machen Sie zweite Auswahlbox zu Bestellung 2. Sobald ein Benutzer klickt, erkennt er, welches Dropdown ausgewählt wurde, und wendet einen anderen Wert auf das Dropdown-Feld an, das nicht ausgewählt ist.

$(document).ready(function(){ 
 
    $('#drp2').val(2) 
 
$("select.drp").on('click', function() { 
 
    var val = $(this).val(); 
 
    console.log(val); 
 
    if(val == "1") { 
 
     $(".drp").not(this).val(2); 
 
    } 
 
    else { 
 
     $(".drp").not(this).val(1); 
 
    } 
 
}); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="drp1" name="drp1" class="drp"> 
 
    <option value="1">Order 1</option> 
 
    <option value="2">Order 2</option> 
 
</select> 
 

 
<select id="drp2" name="drp2" class="drp"> 
 
    <option value="1">Order 1</option> 
 
    <option value="2">Order 2</option> 
 
</select>

Answer 3

I Beispiel gerade die Vorbereitungen für Sie unter Geige überprüfen Sie bitte.

JSFiddle

Hier-Code ist:

$("select.drp").on('change', function() { 
    var val = $(this).val(); 
    console.log(val); 
    var selectedid=$(this).attr("id"); 

    var selectedIndex = $("select#"+selectedid).prop('selectedIndex'); 
// alert(selectedIndex); 
    if(selectedid=="drp1") 
    { 
     if(selectedIndex==0) 
     { 
     $("select#drp2").prop('selectedIndex',1); 
     } 
     else 
     { 
     $("select#drp2").prop('selectedIndex',0); 
     } 

    } 
    else 
    { 
    if(selectedIndex==0) 
     { 
     $("select#drp1").prop('selectedIndex',1); 
     } 
     else 
     { 
     $("select#drp1").prop('selectedIndex',0); 
     } 

    } 

    //Figure out which dropdown triggered the change event. 
    //Let its current value selected but now change the dropdown that didn't triggere the change event with another value 
});