My<cod/>.net
Перенос option между двумя select
Просмотров: 317
Ответов: 4
Есть два select, один все услуги предприятия, второй — только выбранные услуги. Все услуги формируются в левом селекте и при клике — переносятся в правый. При клике в правом — переносятся обратно.
Все красиво, все работает.
Переношу так:
$('#select1 option').live('click', function() {
var html = this.outerHTML;
$(this).remove();
$('#select2').append(html);
})
$('#select2 option').live('click', function() {
var html = this.outerHTML;
$(this).remove();
$('#select1').append(html);
})
Оптион добавляется в конец.
Вот и вопрос: как при обратном переносе засунуть оптион на свое место, а не в конец?
Ну то есть, я выбрал 2,3 оптион, слева остались тока 1,4. Как понять, что оптион 3 при повторном клике в правом селекте должен вернуться между 1 и 4 слева, учитывая, что 2го слева нет, а может не быть и 4го?
Или как отсортировать оптионы после вставки в конец списка, по значению value?
$('#select1 option').live('click', function() {
var html = this.outerHTML;
$(this).remove();
$('#select2').append(html);
})
$('#select2 option').live('click', function() {
var html = this.outerHTML;
$(this).remove();
$('#select1').append(html);
})
Оптионы еще и сортируются по имени, а 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);} // Если не был вставлен - значит он
// последний в текущем списке, засовываем его в конец
})
Лучше пока ничего не придумал, и эта конструкция работает отлично. Спасибо за помощь!
$('#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);} // Если не был вставлен - значит он
// последний в текущем списке, засовываем его в конец
})