Блог

Главная - Вопросы по программированию - Javascript — отключение параметров при изменении, чтобы предотвратить дублирование выбора в раскрывающихся списках выбора, вызывающих проблемы с .val()

Javascript — отключение параметров при изменении, чтобы предотвратить дублирование выбора в раскрывающихся списках выбора, вызывающих проблемы с .val()

#javascript #jquery

Вопрос:

У меня есть набор из 3 раскрывающихся списков выбора. Я хочу, чтобы пользователь мог выбрать только 1 уникальный вариант в каждом из этих 3 раскрывающихся списков. Для этого я получаю значение при изменении любого из выпадающих списков выбора, а затем отключаю эту опцию во всех полях выбора. Здесь все работает нормально:

 $('.select-cont select').change(function() {
    var selection = $(this).val();

    $('select option[value="'   selection   '"]').attr('disabled',true);
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select-cont">
  <label>Select 1</label>
  <select>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>
  <label>Select 2</label>
  <select>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>
  <label>Select 3</label>
  <select>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>
</div>

Однако я также хочу, чтобы пользователь мог изменить свой выбор, и если он это сделает, то выбранная им предыдущая опция больше не должна быть отключена. Для этого я включаю текущую опцию click select , чтобы я мог настроить ее на удаление disabled атрибута:

 var prevSelection;
$('.select-cont select').click(function() {
  // $(this).val(); doesn't work for some reason
  console.log($(this).val());
  // event.target.value does work so let's use that
  prevSelection = event.target.value;
}).change(function() {
  var selection = $(this).val();

  $('select option[value="'   prevSelection   '"]').attr('disabled',false);
  $('select option[value="'   selection   '"]').attr('disabled',true);
});

$('button').click(function() {
  // this returns null if the click/change function exists
  console.log($('#first').val());
}); 
 button {
  margin-top:3rem;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select-cont">
  <label>Select 1</label>
  <select id="first">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>
  <label>Select 2</label>
  <select id="second">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>
  <label>Select 3</label>
  <select id="third">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
  </select>
</div>

<button>Click to log first selection</button>

Это представляет две проблемы, обе, по-видимому, имеют отношение к .val() Первая проблема заключается в том, что если я попытаюсь войти $(this).val() в click функцию, она вернется null . Если я вместо этого использую event.target.value , то он правильно вернет мою ранее выбранную опцию.

Другая проблема заключается в том, что, когда я позже попытаюсь получить значения из полей выбора(при нажатии кнопки в примере), используя $(element).val() также возврат null . Но если я удалю функцию click / change , то .val() правильно верну выбранное значение при нажатии кнопки. Есть идеи, что здесь происходит?

Комментарии:

1. Когда вы отключаете select элемент, я думаю, что ожидаемое значение для него должно быть null . Вы пытались найти выбранный вариант? console.log($('#first > option:selected').val());

2. @Извилистый ааа, в этом есть смысл. использование $('#first > option:selected').val() , похоже, работает, спасибо вам за это!

Метки: , ,