ドロップダウンを同じ値にしないようにする

Question

2つのドロップダウンがあります。プロダクト1のドロップダウンとプロダクト2のドロップダウン。 ドロップダウンの値は、重要度の順番を表します。例えば

：製品1の場合

、私は注文1を選択した場合、その製品2のドロップダウンは 自動的に2（アウトカムAの結果）を注文するように設定する必要があります

もし私がプロダクト2から開始し、ドロップダウン値をOrder に設定すると、プロダクト1のドロップダウンが自動的にOrder 2に設定されます（結果Bの結果）

私は、一度選択するとドロップダウンの値が無効になるいくつかの例を見つけました。ユーザーが自分の選択肢をリセットする自由を持っている可能性があるので、私はそのような行動を検討していません。すべての価値が常に利用可能である必要があります。

オンイベントChangeは、適切な値を適切なドロップダウンに設定するだけです。

は、これまでのところ（私は多くを持っていない）、私は次のようにあります

<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

はあなたが何を意味するか、このですか？

$("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

ので、ロジックがあります。

文書の準備ができたら、オーダー2にセカンドセレクトボックスを作成します。ユーザーがクリックすると、選択されたドロップダウンが検出され、選択されていないドロップダウンには他の値が適用されます。

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

あなたはフィドルの下にチェックしてみてくださいために、私はただの例を準備します。

$("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 
});