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= 
"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 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:

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:

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:

Suggest improvement

How to Display a Placeholder for Phone Numbers in jQuery ?

Underscore.js _.isZero() Method

Share your thoughts in the comments

Explain Chosen and Select2 with examples

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?