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

Question

[bezumkin]

Есть два 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?

Answer 1

[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);} // Если не был вставлен - значит он 
                               // последний в текущем списке, засовываем его в конец
	})

Лучше пока ничего не придумал, и эта конструкция работает отлично. Спасибо за помощь!

Answer 2

[IlVin]

Нужно option писать и в правом селекте и в левом.
Только в одном селекте они style=«display:none».
При переносе пункта в одном селекте делаем jQuery('').hide(), а в другом jQuery('').show().
И работать оно будет гораздо быстрее, так как не нужно будет DOM насиловать.

Comments

[bezumkin]

Спасибо! Пока сделал перенос циклом, мне так в будущем удобнее будет, при дальнейшей обработке формы.
Но ваш вариант красивый. Запомню на будущее, спасибо!

Answer 3

[bobry]

Как вариант, при переносе вправо записывать индекс элемента: .data(«index», .index()), а потом при обратном переносе вставлять его вот так: .insertAfter("#select1 :eq(" + .data(«index») — 1" + ")").

Comments

[bobry]

Можно вместо «index» использовать и value — раз они у вас по возрастанию идут.

[bezumkin]

Хороший вариант, но так работает, только если переносить один элемент. А если у меня 10 оптионсов, я перенес 4,5,6, а потом переношу обратно как 4,5,6 — получается порядок 1,2,3,6,5,4,7,8,9,10. А если обратно переносить как 6,5,4, то порядок будет верный.

[bobry]

Понял — тогда можно привязаться к value и поменять второй селектор на "#select1 [value='...']", где вместо… указывать value предыдущего элемента.

[bezumkin]

Думаю, нужно как то проверять, с каким индексом есть оптионы слева, и вставлять в нужное место. Только как оформить такую проверку — не придумал.

То есть если вставить нужно оптион 5, а слева есть 1,2,3,9 — то нужно понять, что вставлять нужно сразу после 3.

Видимо, должен быть хитрый цикл. Есть идеи?

[bobry]

Циклами ну совсем не хочется :)

[bezumkin]

И мне не хочется, вот и задал вопрос тут — может есть красивое решение?
А циклом просто — перебираем все элементы с нуля и вставляем перед большим value.

Пока рисую цикл.

[bobry]

А вариант с [value] не подошел?

[bezumkin]

Я сейчас и пытаюсь сделать с value и в цикле, вроде получается неплохо.

[bobry]

Можно ведь и без явного цикла — селектором :)

Answer 4

[TimTowdy]

А зачем вы постоянно делаете

var html = this.outerHTML;
$(this).remove();
$('#select2').append(html);

Разве такой код

$('#select2').append($(this));

не аналогичен ему?

Comments

[bezumkin]

Да, наверное. Просто пишу понятно, я с jquery еще только на «ты», а не на «ты, козел!» :-)
Позже проверю, спасибо за ответ!