Переключить выбранные параметры в элементы формы формы с помощью jQuery

Question

У меня есть два элемента select в форме. Когда в одном элементе выбран b, в другом элементе должен быть выбран z.

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

Я не могу найти шаблон для определения того, что происходит, но я думаю, что в логике есть дублирование.

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

$("#5").change(function() { 

    if ($('#5').val() == 'b') { 

     $('#6').find('option:selected').removeAttr("selected"); 
     $('#6 option[value=z]').attr('selected', 'selected'); 

    } else if ($('#5').val() == 'z') { 

     $('#6').find('option:selected').removeAttr("selected"); 
     $('#6 option[value=b]').attr('selected', 'selected'); 

    } 

}) 

$("#6").change(function() { 

    if ($('#6').val() == 'b') { 

     $('#5').find('option:selected').removeAttr("selected"); 
     $('#5 option[value=z]').attr('selected', 'selected'); 

    } else if ($('#6').val() == 'z') { 

     $('#5').find('option:selected').removeAttr("selected"); 
     $('#5 option[value=b]').attr('selected', 'selected'); 

    } 

}) 

Как исправить это?

Answer 1

Вы можете сделать это следующим образом: prop() метод

• Используйте JQuery вместо!
• Использование $(this) в селекторе, чтобы извлечь текущий объект

$(function(){ 
 

 
    $("#5").change(function() { 
 
     if ($(this).val() == 'b') { 
 

 
      $('#6').find('option:selected').prop("selected", false); 
 
      $('#6 option[value=z]').prop('selected', true); 
 

 
     } else if ($(this).val() == 'z') { 
 

 
      $('#6').find('option:selected').prop("selected", false); 
 
      $('#6 option[value=b]').prop('selected', true); 
 

 
     } 
 

 
    }) 
 

 
    $("#6").change(function() { 
 

 
     if ($(this).val() == 'b') { 
 

 
      $('#5').find('option:selected').prop("selected", false); 
 
      $('#5 option[value=z]').prop('selected', true); 
 

 
     } else if ($(this).val() == 'z') { 
 

 
      $('#5').find('option:selected').prop("selected", false); 
 
      $('#5 option[value=b]').prop('selected', true); 
 

 
     } 
 

 
    }) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select id="5"> 
 
    <option value="a">a</option> 
 
    <option value="b">b</option> 
 
    <option value="z">z</option> 
 
    <option value="x">x</option> 
 
    </select> 
 
    
 
    <select id="6"> 
 
    <option value="a">a</option> 
 
    <option value="b">b</option> 
 
    <option value="z">z</option> 
 
    <option value="x">x</option> 
 
    </select> 
 
</div>

Надеется, что это помогает!