jQuery Chosen Plugin

Многим разработчикам не нравятся стандартные элементы форм браузеров, их часто приходится заменять на нестандартные. Наибольшую сложность из всех html элементов представляет элемент select. Его замену можно реализовать с помощью кроссбраузерного плагина jQuery Chosen Plugin. Этот плагин наиболее удобен при замене элемента select по сравнению с другими в связи с тем, что поддерживают замену динамически созданных элементов, события. Более того, для тех кто разбирается в jQurey есть возможно использовать множество доступных обработчиков событий, если Вы откроете js файл плагина. В целом плагин поддерживает следующие возможности:

• настройка стиля select;
• поиск по тексту опций;
• обработка событий;
• стилизация динамически созданных элементов форм;
• генерация уникальных id;
• неограниченное количество стилизованных элементов select;
• и многое другое;

Подключаем нужные библиотеки:

<link href="chosen.css" rel="stylesheet" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript" src="chosen.js"></script>

Чтобы плагин подключился нужно станадартному списку select установить класс "chosen".

<!-- single dropdown --><br /> <select class="chosen" style="width:200px;"><br />   <option>Cent OC</option><br />   <option>Ubuntu</option><br />   <option selected="selected">Fedore core...</option><br />   <option>Free BSD...</option><br />   <option>Debian</option><br /> </select></p> <p><!-- multiple dropdown --><br /> <select class="chosen" multiple="true" style="width:400px;"><br />   <option>Cent OC</option><br />   <option>Ubuntu</option><br />   <option selected="selected">Fedore core...</option><br />   <option>Free BSD...</option><br />   <option>Debian</option><br /> </select>

Результат работы плагина:

Cent OCUbuntuFedore core...Free BSD...Debian Cent OCUbuntuFedore core...Free BSD...Debian

Красиво и просто, но это ещё не всё. Плагин поддерживает событие change:

jQuery(document).ready(function(){ jQuery(".chosen").chosen().change(function(e){ console.log(e); }); });

Живой пример использования события change:

jQuery(document).ready(function(){ jQuery(".chosenexample").chosen().change(function(e){ $('.infoch').fadeOut().empty().text($(this).val()).fadeIn(); });

Получить html через ajax с использованием плагина jQuery Chosen

Мо выбор остановился на этом плагине, ещё из-за его поддержки преобразования элементов полученных динамически, например через ajax:

Cent OCUbuntuFedore core...Free BSD...Debian

$('#button').click(function(){ $('#append').load('chosen.html',function(){ jQuery(".chosennew").chosen().change(function(e){ console.log(e); }); }); });

Для получения значений элемента select можно использовать следующий код:

jQuery(".chosennew").chosen().change(function(e){ console.log($(this).val()); });

Теперь Вы с успехом можете использовать jQuery Chosen на своих сайтах!