Перенос option между двумя select?

Есть два select, один все услуги предприятия, второй — только выбранные услуги. Все услуги формируются в левом селекте и при клике — переносятся в правый. При клике в правом — переносятся обратно.

Все красиво, все работает.



Переношу так:

$('#select1 option').live('click', function() {<br>
		var html = this.outerHTML;<br>
		$(this).remove();<br>
<br>
		$('#select2').append(html);<br>
	})<br>
	$('#select2 option').live('click', function() {<br>
		var html = this.outerHTML;<br>
		$(this).remove();<br>
<br>
		$('#select1').append(html);<br>
	})<br>


Оптион добавляется в конец.

Вот и вопрос: как при обратном переносе засунуть оптион на свое место, а не в конец?



Ну то есть, я выбрал 2,3 оптион, слева остались тока 1,4. Как понять, что оптион 3 при повторном клике в правом селекте должен вернуться между 1 и 4 слева, учитывая, что 2го слева нет, а может не быть и 4го?



Или как отсортировать оптионы после вставки в конец списка, по значению value?
  • Вопрос задан
  • 4324 просмотра
Решения вопроса 1
bezumkin
@bezumkin Автор вопроса
Оптионы еще и сортируются по имени, а value — это циферки. То есть, value идут не по порядку. Я об этом забыл.

А index записывать не получается, так как запоминается только последний index и если я перекину налево 5 элементов и начну вставлять их по этому индексу — они будут друг за другом.

Сделал циклом вот так (в option добавлен параметр data-num='номер по порядку в списке'):
	$('#select1 option').live('click', function() {
		var html = this.outerHTML;
		$(this).remove();

		$('#select2').append(html);
	})
	$('#select2 option').live('click', function() {
		var html = this.outerHTML;
		var index = $(this).data('num');
		$(this).remove();
		
		inserted = 0; // Задаем индикатор вставки оптиона
		$('#select1 option').each(function() {
			var ind = $(this).data('num');
			if (index < ind) {
				$(html).insertBefore(this);
				inserted = 1; // Оптион был вставлен на место
				return false;
			}
		})
		if (inserted == 0) {$('#select1').append(html);} // Если не был вставлен - значит он 
                               // последний в текущем списке, засовываем его в конец
	})


Лучше пока ничего не придумал, и эта конструкция работает отлично. Спасибо за помощь!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@IlVin
Нужно option писать и в правом селекте и в левом.
Только в одном селекте они style=«display:none».
При переносе пункта в одном селекте делаем jQuery('').hide(), а в другом jQuery('').show().
И работать оно будет гораздо быстрее, так как не нужно будет DOM насиловать.
Ответ написан
bobry
@bobry
Как вариант, при переносе вправо записывать индекс элемента: .data(«index», .index()), а потом при обратном переносе вставлять его вот так: .insertAfter("#select1 :eq(" + .data(«index») — 1" + ")").
Ответ написан
@TimTowdy
А зачем вы постоянно делаете
var html = this.outerHTML;
$(this).remove();
$('#select2').append(html);

Разве такой код
$('#select2').append($(this));
не аналогичен ему?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы