В этом уроке речь пойдет о создании виждета - перенос выбранных опций из одного multi-select в другой с помощью jQuery.
Задачи, которые мы ставим перед виджетом:
Перенос элементов из левого мультиселекта в правый; в правый мультиселект нельзя переносить более 4х элементов.
Приступим. Вначале подключаем фреймоворк jQuery.
В HTML у нас должно быть 2 элемента <select multiple>, один (id=select1) у нас будет хранить все опции, в другой (id=select2) выбранные опции у нас будут переноситься:
<div class="holder">
<select multiple="multiple" id="select1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<a href="#" id="add">добавить >></a>
</div>
<div class="holder">
<select multiple="multiple" id="select2" > </select>
<a href="#" id="remove"><< удалить </a>
</div>
Теперь м/у тегами head напишем следующий простой js-код:
<script type="text/javascript">
$(document).ready(function(){
$('#add').click(function() {
// на событие клик вешаем функцию
$('#select1 option:selected').each(function(el) {
// у элемента #select1 собираем выбранные опции (option:selected) и на каждую (each) из них применяем ф-цию
if ($('#select2 option').length < 4) {
// Если в правом мультиселекте тегов option менее 4
$(this).appendTo('#select2');
// внутрь #select2 вставляем выбранные ранее опции
}
else alert("Больше 4етырех нельзя").end();
// Иначе выводим сообщение и останавливаем цикл end()
});
});
$('#remove').click(function() {
$('#select2 option:selected').each(function(el) {
$(this).appendTo('#select1');
});
});
});
</script>
К первой половине кода я оставил коментарии, чтобы вам было проще разобраться. По событию click мы собираем выбранные пользователем опции (#select1 option:selected) и к каждой из выбранных опций применяем функцию. Перед перносом в правый мультиселект (#select2), проверяем сколько там уже есть опций $('#select2 option').length < 4. Если их меньше 4, то выбранный элемент переносим, иначе говорим о том, что "больше 4-х нельзя".
Т.к. ф-ция each это цикл, то при одновременном переносе нескольких элементов из левого мультиселекта в правый, условие $('select2').length < 4) проверяет каждый переносимый элемент, поэтому может получиться так, что alert будет выведен ровно столько раз, сколько лишних элементов попытается перенести пользователь.
Вторая часть кода практически идентична, за исключением того, что в этой части не требуется каких-либо дополнительных проверок, думаю что с этой частью вы разберетесь самостоятельно.
Вот и все, Виджет реализован, он абсолютно идентичен предыдущему, который был реализован на mootools, да и js-код похож :). При желании виджет можно сделать красивее :), но это в рамки данного урока не входит.
Спасибо за внимание. Урок окончен, коментарии приветствуются.