Explain Chosen and Select2 with examples

31 Jul, 2020
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”).chosen()
 $(“.chosen-select”).select2()
 $(“.chosen-select”).select2()
Differences between Select2 and Chosen:
Selection and DeselectionSelect2 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>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">      </script>          <!--These jQuery libraries for            chosen need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">        </script>        <link rel="stylesheet"               href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />          <!--These jQuery libraries for select2             need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">       </script>        <link rel="stylesheet"               href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />        <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>            <select class="country"                    multiple="true"                    style="width: 200px;">                <option value="1">India</option>                <option value="2">Japan</option>                <option value="3">France</option>            </select>            <h4>Selections using Chosen</h4>            <select class="country1"                     multiple="true"                     style="width: 200px;">                <option value="1">India</option>                <option value="2">Japan</option>                <option value="3">France</option>            </select>        </form>    </body></html>Output:
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>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">      </script>          <!--These jQuery libraries for            chosen need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">        </script>        <link rel="stylesheet"               href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />          <!--These jQuery libraries for select2             need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">       </script>        <link rel="stylesheet"               href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />        <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>            <select class="country"                    multiple="true"                    style="width: 200px;">                <option value="1">India</option>                <option value="2">Japan</option>                <option value="3">France</option>            </select>            <h4>Selections using Chosen</h4>            <select class="country1"                     multiple="true"                     style="width: 200px;">                <option value="1">India</option>                <option value="2">Japan</option>                <option value="3">France</option>            </select>        </form>    </body></html>
Output:
Programmatic AccessIf 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>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">       </script>          <!--These jQuery libraries for chosen             need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">       </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />          <!--These jQuery libraries for             select2 need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">      </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />        <script>            $(document).ready(function () {                //Select2                var $prog = $(".progLang").select2();                $(".Front-end").on("click", function () {                    $prog.val(["ht", "js"]).trigger("change");                });                //Chosen                var $prog1 = $(".progLang1").chosen();                $(".Front-end1").on("click", function () {                    $prog1.val(["ht", "js"]).trigger("change");                });            });        </script>    </head>    <body>        <form>            <h4>Selections using Select2</h4>            <select class="progLang"                     multiple="true"                    style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>                <option value="js">Javascript</option>                <option value="c">C++</option>            </select>            <input type="button"                   class="Front-end"                    value="set Front-end Technologies" />            <h4>Selections using Chosen</h4>            <select class="progLang1"                     multiple="true"                     style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>                <option value="js">Javascript</option>                <option value="c">C++</option>            </select>            <input type="button"                    class="Front-end1"                   value="set Front-end Technologies" />        </form>    </body></html>Output:After clicking set Front-end Technologies button:
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>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">       </script>          <!--These jQuery libraries for chosen             need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">       </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />          <!--These jQuery libraries for             select2 need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">      </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />        <script>            $(document).ready(function () {                //Select2                var $prog = $(".progLang").select2();                $(".Front-end").on("click", function () {                    $prog.val(["ht", "js"]).trigger("change");                });                //Chosen                var $prog1 = $(".progLang1").chosen();                $(".Front-end1").on("click", function () {                    $prog1.val(["ht", "js"]).trigger("change");                });            });        </script>    </head>    <body>        <form>            <h4>Selections using Select2</h4>            <select class="progLang"                     multiple="true"                    style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>                <option value="js">Javascript</option>                <option value="c">C++</option>            </select>            <input type="button"                   class="Front-end"                    value="set Front-end Technologies" />            <h4>Selections using Chosen</h4>            <select class="progLang1"                     multiple="true"                     style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>                <option value="js">Javascript</option>                <option value="c">C++</option>            </select>            <input type="button"                    class="Front-end1"                   value="set Front-end Technologies" />        </form>    </body></html>
Output:
After clicking set Front-end Technologies button:
TaggingWhen 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>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">      </script>          <!--These jQuery libraries for             chosen need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">       </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />          <!--These jQuery libraries for select2             need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">       </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />        <script>            $(document).ready(function () {                //Select2                $(".progLang").select2({                    tags: true,                });                //Chosen                $(".progLang1").chosen({                    tags: true,                });            });        </script>    </head>    <body>        <form>            <h4>Selections using Select2</h4>            <select class="progLang"                     multiple="true"                     style="width: 200px; position: relative;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>            </select>            <h4>Selections using Chosen</h4>            <select class="progLang1"                    multiple="true"                     style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>            </select>        </form>    </body></html>Output:
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>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">      </script>          <!--These jQuery libraries for             chosen need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">       </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />          <!--These jQuery libraries for select2             need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">       </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />        <script>            $(document).ready(function () {                //Select2                $(".progLang").select2({                    tags: true,                });                //Chosen                $(".progLang1").chosen({                    tags: true,                });            });        </script>    </head>    <body>        <form>            <h4>Selections using Select2</h4>            <select class="progLang"                     multiple="true"                     style="width: 200px; position: relative;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>            </select>            <h4>Selections using Chosen</h4>            <select class="progLang1"                    multiple="true"                     style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>            </select>        </form>    </body></html>
Output:
TokenizationTokenization 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>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">      </script>          <!--These jQuery libraries for             chosen need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">      </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />          <!--These jQuery libraries for             select2 need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">      </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />        <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>            <select class="progLang"                     multiple="true"                    style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>            </select>            <h4>Selections using Chosen</h4>            <select class="progLang1"                    multiple="true"                    style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="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>        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">      </script>          <!--These jQuery libraries for             chosen need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js">      </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" />          <!--These jQuery libraries for             select2 need to be included-->        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js">      </script>        <link rel="stylesheet"              href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />        <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>            <select class="progLang"                     multiple="true"                    style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>            </select>            <h4>Selections using Chosen</h4>            <select class="progLang1"                    multiple="true"                    style="width: 200px;">                <option value="py">Python</option>                <option value="ja">Java</option>                <option value="ht">HTML</option>            </select>        </form>    </body></html>
Output:
JavaScript-Misc
Picked
JavaScript
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.