Объясните Chosen и Select2 на примерах
Два плагина jQuery, Chosen и Select2, используются для стилизации полей выбора. Он улучшает внешний вид окон выбора, улучшает их поведение, что делает их более удобными для пользователя. Их можно использовать как для окон одиночного выбора, так и для полей множественного выбора.
Необходимо добавить следующие библиотеки jQuery:
- select2.min.js
- select2.min.css
- selected.jquery.min.js
- selected.min.css
Активируйте плагин в полях выбора:
$ («. Selected-select»). Selected ()
$ («. Selected-select»). Select2 ()
Различия между Select2 и Chosen:
Выбор и отмена выбора
Select2 может отменить выбор ранее выбранных параметров, просто щелкнув выбранный параметр в раскрывающемся списке. Но у selected нет этой функции, так как выбранные параметры блекнут.
<!DOCTYPE html><html><head><scriptsrc=</script><!--These jQuery libraries forchosen need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<!--These jQuery libraries for select2need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<script>$(document).ready(function () {//Select2$(".country").select2({maximumSelectionLength: 2,});//Chosen$(".country1").chosen({max_selected_options: 2,});});</script></head><body><form><h4>Selections using Select2</h4><selectclass="country"multiple="true"style="width: 200px;"><optionvalue="1">India</option><optionvalue="2">Japan</option><optionvalue="3">France</option></select><h4>Selections using Chosen</h4><selectclass="country1"multiple="true"style="width: 200px;"><optionvalue="1">India</option><optionvalue="2">Japan</option><optionvalue="3">France</option></select></form></body></html>Выход:
Программный доступ
Если некоторые из параметров имеют некоторую связь друг с другом, и эти связанные параметры имеют высокую вероятность быть выбранными, то это можно сделать одним щелчком мыши с помощью Select2. Это очень полезно при множественном выборе. Пока Chosen не может выполнить эту логическую привязку.
<!DOCTYPE html><html><head><scriptsrc=</script><!--These jQuery libraries for chosenneed to be included--><scriptsrc=</script><linkrel="stylesheet"href=<!--These jQuery libraries forselect2 need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<script>$(document).ready(function () {//Select2var $prog = $(".progLang").select2();$(".Front-end").on("click", function () {$prog.val(["ht", "js"]).trigger("change");});//Chosenvar $prog1 = $(".progLang1").chosen();$(".Front-end1").on("click", function () {$prog1.val(["ht", "js"]).trigger("change");});});</script></head><body><form><h4>Selections using Select2</h4><selectclass="progLang"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option><optionvalue="js">Javascript</option><optionvalue="c">C++</option></select><inputtype="button"class="Front-end"value="set Front-end Technologies"/><h4>Selections using Chosen</h4><selectclass="progLang1"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option><optionvalue="js">Javascript</option><optionvalue="c">C++</option></select><inputtype="button"class="Front-end1"value="set Front-end Technologies"/></form></body></html>Выход:
После нажатия кнопки « Установить интерфейсные технологии» :
Добавление тегов
Если у вас есть широкий выбор вариантов, и вы не можете включить все варианты, включите опцию тегов. Это заставит пользователя добавить новый вариант, если он еще не указан в параметрах. Это можно сделать, установив для параметра тегов значение «true» .
Эта опция доступна в Select2, в то время как в Chosen пользователь не может добавлять новые варианты в список.
<!DOCTYPE html><html><head><scriptsrc=</script><!--These jQuery libraries forchosen need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<!--These jQuery libraries for select2need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<script>$(document).ready(function () {//Select2$(".progLang").select2({tags: true,});//Chosen$(".progLang1").chosen({tags: true,});});</script></head><body><form><h4>Selections using Select2</h4><selectclass="progLang"multiple="true"style="width: 200px; position: relative;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option></select><h4>Selections using Chosen</h4><selectclass="progLang1"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option></select></form></body></html>Выход:
Токенизация
Токенизация используется после того, как для параметра тегов установлено значение «true». Он предоставляет разделители токенов, которые используются в качестве ярлыка для создания тегов. Это можно сделать, введя любой разделитель токенов, указанный в списке, после имени тега. Любой символ может быть создан как разделитель токенов с помощью Select2.
Как упоминалось ранее, поскольку Chosen не имеет функции тегов, функция токенизации также недоступна.
<!DOCTYPE html><html><head><scriptsrc=</script><!--These jQuery libraries forchosen need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<!--These jQuery libraries forselect2 need to be included--><scriptsrc=</script><linkrel="stylesheet"href=<script>$(document).ready(function () {//Select2$(".progLang").select2({tags: true,maximumSelectionLength: 2,tokenSeparators: ["/", ", ", ";", " ", "#"],});//Chosen$(".progLang1").chosen({tags: true,max_selected_options: 2,tokenSeparators: ["/", ", ", ";", " ", "#"],});});</script></head><body><form><h4>Selections using Select2</h4><selectclass="progLang"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option></select><h4>Selections using Chosen</h4><selectclass="progLang1"multiple="true"style="width: 200px;"><optionvalue="py">Python</option><optionvalue="ja">Java</option><optionvalue="ht">HTML</option></select></form></body></html>Выход:
