Explain Chosen and Select2 with examples
The two jQuery plugins, Chosen and Select2 are used to style the select boxes. It improves the look of select boxes, enhances its behavior, thus making them much more user-friendly. They can be used for both single select boxes and multiple select boxes.
These jQuery libraries need to be added:
- select2.min.js
- select2.min.css
- chosen.jquery.min.js
- chosen.min.css
Activate the plugin on the select boxes:
-
$(“.chosen-select”).chosen()
-
$(“.chosen-select”).select2()
Differences between Select2 and Chosen:
-
Selection and Deselection
Select2 can deselect the options that are selected previously by just clicking the selected option from the dropdown list. But chosen does not has this feature as the selected options get faded.
<!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>Output:
-
Programmatic Access
If some of the options have some link with each other and these linked options have a high probability to be selected, then it can be done by single click using Select2. It is very useful in multiple selections. While Chosen can’t perform this logical linking.
<!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>Output:
After clicking set Front-end Technologies button:
-
Tagging
When you have a wide range of choices and you can’t include all choices then enable tags option. This will make the user add a new choice if not already present in the options. This can be done by setting the tags option to “true”.
This option is available in Select2 while in Chosen user can’t add new choices to the list.
<!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>Output:
-
Tokenization
Tokenization is used after the tags option is set to “true”. It provides token separators that are used as a shortcut for creating tags. This can be done by typing any token separator which is specified in the list, after the name of the tag. Any character can be created as a token separator with the help of Select2.
As mentioned previously, since Chosen don’t have tagging feature, therefore, the tokenization feature is also not available.
<!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>Output:
