Multi-Select c помощью MooTools

В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где Ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools. Предлагаю для начала ознакомится с тем, что у нас должно получиться:

Вначале подключаем фреймоворк Mootools.
Теперь создадим 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>

div.holder в связке с css дает стилевое оформление.
Теперь м/у тегами head напишем следующий простой js-код:

<script type="text/javascript">
window.addEvent('domready', function() {
 // когда все элементы DOM (структура документа) загрузились

$('add').addEvent('click', function() {
// на элемент #add вешаем обработчик событий addEvent и указываем 
//тип события - клик, после которого нужно выполнить ф-цию

$('select1').getSelected().each(function(el) { 
// у элемента #select1 получаем выбранные опции (getSelected)
// и к  каждой из них  (each)применяем следующую ф-цию

el.inject($('select2')); 
//  вставляем выбранный элемент в правую колонку
}); 
}); 

$('remove').addEvent('click', function() { 
$('select2').getSelected().each(function(el) { 
el.inject($('select1')); 
}); 
}); 
});
</script>

К первой половине коду я оставил коментари, чтобы вам было проще разобраться. Вторая часть кода зеркальная и выполняет перенос элементов в обратном порядке.

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

								
if ($('select2').length < 4) { 
// ограничиваем пользователю кол-во разрешенных элементов до 4х
														
el.inject($('select2')); }
// вставляет выбранный элемент в правую колонку

else alert("Больше 4етырех нельзя").end();
		

Тут тоже все очень просто. С помощью ф-ции length определяем сколько элементов уже есть в правом мультиселекте, если их меньше 4, вставляем, если уже 4 и более выводим сообщение alert("больше 4етырех нельзя"). Т.к. ф-ция each запускает цикл, то при одновременном переносе нескольких элементов из левого мультиселекта в правый, условие $('select2').length < 4) проверяет каждый переносимый элемент, поэтому может получиться так, что alert будет выведен ровно столько раз, сколько лишних элементов "попытаються прорваться" в правый мультиселект.

Это нехорошо, вполне достаточно одного алерта. Поэтому, если условие $('select2').length < 4) не соблюдается, выводим alert и останавливаем цикл end().

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

Спасибо за внимание. Коментарии приветствуются.