Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Explain Chosen and Select2 with examples

  • Last Updated : 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”).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>
            <script src=
          </script>
      
            <!--These jQuery libraries for 
               chosen need to be included-->
            <script src=
            </script>
            <link rel="stylesheet" 
                  href=
      
            <!--These jQuery libraries for select2 
                need to be included-->
            <script src=
           </script>
            <link rel="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>
                <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 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=
           </script>
      
            <!--These jQuery libraries for chosen 
                need to be included-->
            <script src=
           </script>
            <link rel="stylesheet"
                  href=
      
            <!--These jQuery libraries for 
                select2 need to be included-->
            <script src=
          </script>
            <link rel="stylesheet"
                  href=
            <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:

  • 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=
          </script>
      
            <!--These jQuery libraries for 
                chosen need to be included-->
            <script src=
           </script>
            <link rel="stylesheet"
                  href=
      
            <!--These jQuery libraries for select2
                 need to be included-->
            <script src=
           </script>
            <link rel="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>
                <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:

  • 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=
          </script>
      
            <!--These jQuery libraries for 
                chosen need to be included-->
            <script src=
          </script>
            <link rel="stylesheet"
                  href=
      
            <!--These jQuery libraries for 
                select2 need to be included-->
            <script src=
          </script>
            <link rel="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>
                <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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!