jquery - Удалить выбранное значение раскрывающегося списка из других раскрывающихся списков и отобразить его обратно при выборе другого параметра.

Question

У меня есть несколько раскрывающихся списков с одинаковыми параметрами.

1. Когда пользователь выбирает вариант раскрывающегося списка, его необходимо удалить из других раскрывающихся списков.

2. при выборе другого значения из того же раскрывающегося списка удаленное значение должно добавляться обратно во все раскрывающиеся списки.

Я выполнил первый сценарий ниже:

HTML:

<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>

jQuery:

$(function() {
  $('.dropdown').change(function() {
    dropdownval = $(this).val();
    $('.dropdown').not(this).find('option[value="' + dropdownval + '"]').remove();
  });
});

Я застрял во втором сценарии. Любая помощь приветствуется.

Answer 1

Проще было бы добавить атрибут disabled вместо их удаления. Что касается пользовательского интерфейса, я думаю, что он также лучше.

Их удаление означает, что это намного сложнее, потому что вам придется добавить их обратно (в нужном месте). Обратите внимание, что я добавил объявление var в dropdownval, иначе это была бы глобальная переменная.

трюк, чтобы повторно включить их, прежде чем вы захотите отключить новое значение, заключается в том, чтобы сохранить предыдущее значение в поле данных, здесь я использовал 'data-previous-value'

$(function() {
  $('.dropdown').change(function() {
    var prev = $(this).data('previous-value');
    if(prev){
      $('.dropdown').not(this).find('option[value="' + prev + '"]').attr('disabled', false);
    }
    var dropdownval = $(this).val();
    $('.dropdown').not(this).find('option[value="' + dropdownval + '"]').attr('disabled', true);
    $(this).data('previous-value', dropdownval)
  });
});

select {
    margin: 0.5em 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>

Однако, если вы действительно заставите их исчезнуть, я бы использовал для этого класс CSS (здесь hidden). Вы можете сделать это в связанных вызовах функций следующим образом:

$(function() {
  $('.dropdown').change(function() {
    var prev = $(this).data('previous-value');
    if(prev){
      $('.dropdown').not(this).find('option[value="' + prev + '"]').removeClass('hidden').attr('disabled', false);
    }
    var dropdownval = $(this).val();
    $('.dropdown').not(this).find('option[value="' + dropdownval + '"]').addClass('hidden').attr('disabled', true);
    $(this).data('previous-value', dropdownval)
  });
});

select {
    margin: 0.5em 1em;
}

.hidden {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<select class="dropdown" size="7">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>