How to create an eye catchy Multiselect in jQuery ?

Last Updated : 31 Jul, 2024

In this article, we will create an eye catchy multi-select in jQuery. It is a selection menu in which we can select multiple values at the same time. For example, choosing different colleges.

Step 1: First of all create an HTML file and add the following CDN links in the head tag.

CDN link for jQuery:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>

CDN links for the chosen plugin:

<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.8.7/chosen.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /

After all the addition of CDN links of the following that are listed above, we just have to create a multi-select menu using HTML, we just have to initiate the chosen plugin by using the following code snippet.

Syntax:

$("<selector>").chosen()

Example 1: In the example, we can see the multi-select in the action. For example, we can select multiple values and they will be added to the list and we can remove the items by just clicking the small cross icon on the selected items.

HTML

<!DOCTYPE html>

<html>
<head>
    <!-- CDN of jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <!-- CDN for chosen plugin -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" 
        crossorigin="anonymous" 
        referrerpolicy="no-referrer">
    </script>

    <!-- CDN for CSS of chosen plugin -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css"          
        crossorigin="anonymous" 
        referrerpolicy="no-referrer" />
</head>

<body>
    <h2 style="color:green;">GeeksforGeeks<h2>
    <form>
        <!-- Multiple select menu with multiple 
             programming languages -->
        <select id="select" multiple 
                style="width:200px">
            <option value="Python">Python</option>
            <option value="Ruby">Ruby</option>
            <option value="Swift">Swift</option>
            <option value="C++">C++</option>
            <option value="Javascript">Javascript</option>
        </select>
    </form>

    <script>
        // Initiating the chosen plugin
        $(document).ready(function(){
            $("#select").chosen();
        })
    </script>    
</body>
      
</html>

Output:

Example 2: In this example, we are going to add some more features to our multiselect option, we will be adding groups so that we can select among multiple groups and select multiple items as well, this plugin also gives us some additional options to add in our multi-select. We can choose many items but in this case, we can only select four items by setting the max_selected_options option. Another option will keep the dropdown menu open until we select the items by setting the hide_results_on_select option.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- CDN of jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <!-- CDN for chosen plugin -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" 
          crossorigin="anonymous" 
          referrerpolicy="no-referrer">
    </script>

    <!-- CDN for multiselect jquery plugin -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.min.js" 
           crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>

    <!-- CDN for CSS of chosen plugin -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" 
         crossorigin="anonymous" 
         referrerpolicy="no-referrer" />
</head>

<body>
    <h2 style="color:green;">GeeksforGeeks<h2>
    <form>
        <select id="select" multiple 
                style="width:330px">
            <optgroup label="VEG">
                <option value="1">Salad</option>
                <option value="2">Pasta</option>
                <option value="3">Vegan Pizza</option>
            </optgroup>
            <optgroup label="NON-VEG">
                <option value="4">Chicken</option>
                <option value="5">Mutton</option>
                <option value="6">Steak</option>
            </optgroup>
            <optgroup label="BEVERAGE">
                <option value="4">Water</option>
                <option value="5">Soda</option>
                <option value="6">Wine</option>
            </optgroup>
        </select>
    </form>

    <script>
        // Initiating the chosen plugin
        $(document).ready(function()
        {            
            $("#select").chosen({
                // This option restricts the number 
                  // of items for selection
                max_selected_options: 4,
                // This option keeps the dropdown 
                  // open till the selection
                hide_results_on_select: false,
            });
        })
    </script>    
</body>
      
</html>

Output:

How to create top positioned icon selects using jQuery Mobile ?

iamgaurav

Improve

Article Tags :

How to create an eye catchy Multiselect in jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?