Выпадающее меню Force не имеет одинаковых значений

Question

У меня есть два выпадающих меню. Выпадающий список для продукта 1 и раскрывающийся список для продукта 2. Выпадающие значения представляют собой порядок важности.

Например:

Для продукта 1, если выбрать Order 1, затем 2 продукта выпадающий должны автоматически устанавливается на заказ 2. (результат Итоговом А)

Если я должен был начаться с Продукта 2 и установить его выпадающее значение для заказа 1, тогда выпадающее меню продукта 1 должно автоматически устанавливаться на заказ 2. (результат результата B)

Я нашел пример, где значения в выпадающем списке будут отключены после его выбора. Я не смотрю на такое поведение, так как у пользователя может быть свобода сбросить свой выбор, поэтому мне нужно, чтобы все ценности были доступны в любое время.

Событие on 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

Я просто подготовить пример для вас, пожалуйста, проверьте ниже скрипку.

JSFiddle

Вот код:

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