3

Есть несколько списков одинаковых.

<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

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

Как такое реализовать?

3
  • 1
    Ты сам только что логику расписал в вопросе. Что именно не получается? 17 окт 2017 в 15:50
  • Пробовал вешать change на select, но там можно выбрать только те которые selected опции. А нужно как-то повесить change на конкретный option, и отслеживать его... Может какое-то простое решение есть, чтобы костыли не писать...
    – user190134
    17 окт 2017 в 16:33
  • Нет, выбирать у select можно не только selected. ты можешь спокойно указать порядковый номер option. отслеживать, если он равен, например 1, то делать манипуляции.. типа такого $('select[name=name]:eq(0) option:eq(1)');.... также ты можешь смотреть на его значение и по нему ориентироваться...то есть если при change в select'e равно отслеживаемому - делаем действия 17 окт 2017 в 16:47

3 ответа 3

2

Если я вас правильно понял, вот так работает.

$('.change').on('change',function() {
      $(this).children('option').each(function(){
      var options = $('.change option[value='+$(this).val()+']').not(this);
      if($(this).is(':selected')) {
        $(options).prop('disabled',true);
        $(options).prop('selected',false);
      } else {
        $(options).prop('disabled',false);
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

3
  • Идея хорошая, но не до конца работает. Возьму на вооружение и немного допилю. Спасибо
    – user190134
    17 окт 2017 в 20:50
  • Да, тоже увидел баг: ранее недоступные опции у меня разблокируются чаще, чем надо и нужно доп. условие. Вы правы.
    – Talleyran
    18 окт 2017 в 6:24
  • Нужно добавить проверку на if (!option.is(':disabled')) ) только. А так взял Ваш вариант полностью, благодарю
    – user190134
    18 окт 2017 в 10:51
1

Предполагаю, что нужно что-то такое:

let trackingSelect = 'select[name=name]:eq(0)';

$(document).on('change', trackingSelect, function(){	
  let optionValue = this.selectedIndex == 0 ? 'option[value="' + $(this).val()  + '"]' : 'option[value]';
  let propFlag = this.selectedIndex == 0 ? true : false;     
  $('select[name=name]').not(trackingSelect).find(optionValue).prop('disabled', propFlag);        
});

/*
$(document).on('change', trackingSelect, function(){	
  let optionValue = 'option[value]';
  let propFlag = false;   
  
  if (this.selectedIndex == 0) {
    optionValue = 'option[value="' + $(this).val()  + '"]';
    propFlag = true;
  }
  $('select[name=name]').not(trackingSelect).find(optionValue).prop('disabled', propFlag);        
});
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="name" multiple="true" class="change">
<option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

Где select[name=name]:eq(0) указывает на первый select, this.selectedIndex == 0 указывает на первый option в данном select'е (при желании - изменить)

Однако в данном случае, если человек ткнет что-то в других селектах, а потом в первом выберет первый - то нужно предупредить юзера, чтоб перевыбрал значения

1

Решение задачи:

$('.change').on('change', function() {
  $(this).children('option').each(function() {
    var option = $(this),
      options = $('.change option[value=' + option.val() + ']').not(this);

    if (!option.is(':disabled')) {
      if (option.is(':selected')) {
        $(options).prop('disabled', true);
        $(options).prop('selected', false);
      } else {
        $(options).prop('disabled', false);
      }
    }

  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="name" multiple="true" class="change">
<option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

<select name="name" multiple="true" class="change">
    <option value="1">Text1</option>
    <option value="2">Text2</option>
    <option value="3">Text3</option>
</select>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.