jquery удаляет / добавляет параметры выбора после клонирования списка выбора

#javascript #jquery #jquery-selectors

#javascript #jquery #jquery-селекторы

Вопрос:

Мне нужно иметь возможность клонировать выпадающий список и фильтровать только те параметры, которые еще не были выбраны в группе списков выбора.

Например, имея следующее:

 <select name="SelectService" class="selService">
<option value="1">Some service</option>
<option value="2">Another one</option>
<option value="3">One more</option>
</select>
  

Когда я нажимаю кнопку «клонировать», он клонирует список выбора ТОЛЬКО с теми параметрами, которые еще не были выбраны.

пример: выберите опцию «Какой-либо сервис» -> нажмите «клонировать» -> добавлен новый список выбора, содержащий только значения параметров: 2 и 3.

и т.д. Клонирование и удаление списков выбора приведет к повторному заполнению списков выбора на основе выбранных до сих пор параметров.

РЕДАКТИРОВАТЬ: чтобы лучше визуализировать это, вот снимок экрана: введите описание изображения здесь

СЦЕНАРИЙ:

  1. я начинаю только с 1 выпадающего списка (в котором есть 5 параметров) => 1,2,3,4,5 -> по умолчанию выбраны первые параметры.
  2. Я нажимаю clone -> добавлен новый список ТОЛЬКО с параметрами 2,3,4,5.
  3. я выбираю вариант 5 (в списке выбора

    2)

  4. Я нажимаю clone -> new список (# 3) добавлен ТОЛЬКО с параметрами 2,3,4
  5. я выбираю вариант 2 (в списке выбора

    3)

  6. Я нажимаю clone -> новый список (# 4) создается с параметрами 3,4

.. и так далее.

Теперь, когда я удаляю список выбора # 2 (или любой другой список выбора), это означает, что ВСЕ списки выбора должны обновляться и включать выбранный параметр из удаленного списка выбора (в нашем случае # 2)

Справка. Спасибо

Ответ №1:

Кажется, это делает то, что вы хотите: http://jsfiddle.net/infernalbadger/SKVSu/1 /

 $('#clone').click(function() {
    var original = $('select.selService:eq(0)');
    var allSelects = $('select.selService');
    var clone = original.clone();

    $('option', clone).filter(function(i) {
        return allSelects.find('option:selected[value="'   $(this).val()   '"]').length;
    }).remove();

    $('#target').append(clone).append('<br />');
});
  

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

1. @Shane Извините, что вы имеете в виду?

2. @Shane Я обновил свой ответ для работы с несколькими вариантами выбора. Я все же позволю вам попробовать и выработать решение для удаления.