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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.