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

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

demosourse

Вначале подключаем фреймоворк 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().

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

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

 

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.davidwalsh.name
Перевел: Евгений Стыценков
Урок создан: 21 Июня 2009
Просмотров: 30901
Правила перепечатки


5 последних уроков рубрики "Mootools"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 21 Июня 2009 17:04
    Никита
    Очень кластный урок спасибо, как раз пригодился. :)
  • 14 Декабря 2010 02:41
    Denis Bazhan
    как бы это с пыхом скрестить? нет урока*?
  • 23 Октября 2011 13:03
    admroot
    Уважаемый Евгений, подскажите как отправить данные в таблицу mysql из select2?
  • 10 Марта 2012 16:16
    ruseller1
    Mootools - классная библиотека в отличии от самой отстойной и самой глючной - JQuery, но урок, честно говоря, очень бредовый, т.к. грузить большую библиотеку Mootools только для того, чтобы из одного окна удалить два элемента, а в другое добавить - это уже полное извращение! Для того, чтобы это сделать БЕЗ библиотеки достаточно двух строчек кода.
^ Наверх ^