Помогите доработать многострочный список выбора в select

Question

Помогите доработать многострочный список выбора в select

Константин Ефименко Гуру (3721), закрыт 4 года назад

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

$('select option').on('click', function(){
var $t = $(this);
if($t.hasClass('selected')){
$t.removeClass('selected');
}else{
$t.addClass('selected');
}
});
$('.add').on('click', function(){
var $sl = $('.selected');
if($sl.length > 0){
$sl.each(function(){
var $m = $('.mad');
var $v = $(this).val();
if($m.find('option[value="'+ $v +'"]').length == 0){
$m.append('<option value="'+ $v +'">'+ $(this).text() +'</option>');
}
});
}
});

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

Есть ещё 1 нюанс, дело в том, что пользователь может не только добавлять, но и удалять записи из второй колонки. Это очень не удобно, когда в первой колонке ты можешь выбирать несколько элементов списка, а во второй лишь по одному.

Честно говоря, ума не приложу как сделать, чтобы можно было выбирать несколько элементов списка простым кликом мыши, в обоих колонках (по отдельности). Проблема не в том, что нельзя, а в том что, механизм начинает работать неправильно и добавлять записи в обе колонки одновременно.

Вот ссылка на мой механизм: https://jsfiddle.net/ehp9y174/

Не знаю, даст ли это что-то, но вот ссылка на оригинал: http://jsfiddle.net/wpv91ct6/
Может быть, он даст вам необходимое вдохновение, а может поможет хоть частично, понять логику скрипта.

Answer 1

Когда пишется

$(элемент). on('click');

то событие не сработает для новых добавленных элементов. Могешь читать про делегирование событий) Если элемент должен создаваться динамически, пишут так:

$('родитель').on('click', 'элемент', function(){ ...});

А можно сразу $(document).on(...)

https://jsfiddle.net/OPTlMUS/fc40mg9r/

P.s. option.value и вовсе не пригодились...