How to use jQuery UI MultiSelect Widget ?

Last Updated : 20 Nov, 2020

In this article, we will learn to use jQuery UI MultiSelect Widget for our web pages. Please download the required pre-compiled files before implementing the following example codes from the official website. Take care of the file paths in your project folder.

Example 1: The following example demonstrates the basic example of a dropdown box using jQuery UI MultiSelect Widget plugin.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" 
        href="css/jquery.multiselect.css" />

    <link rel="stylesheet" type="text/css" 
        href="style.css" />

    <link rel="stylesheet" type="text/css"
        href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />

    <script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
    </script>

    <script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
    </script>

    <script type="text/javascript" src="src/jquery.multiselect.js">
    </script>
</head>

<body>
    <h2>GeeksForGeeks</h2>

    
<p><b>
        Check for option values 
        after form submit
    </b></p>


    <form action="#" method="post" 
        style="margin-top:20px">

        <select id="multipleSelectID" 
            name="multipleSelect" 
            multiple="multiple" size="5">

            <b>Select country:</b><br>
            <option value="america">America</option>
            <option value="china">China</option>
            <option value="japan">Japan</option>
            <option value="australia">Australia</option>
        </select>

        <select id="selectID" name="select" size="5">
            <b>Select city:</b><br>
            <option value="jaipur">Jaipur</option>
            <option value="delhi">Delhi</option>
            <option value="mumbai">Mumbai</option>
            <option value="chennai">Chennai</option>
        </select>
        <div style="height:10px;"></div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    </form><br>
    <div id="selectResultID">
    </div>

    <script type="text/javascript">
        $("#multipleSelectID").multiselect();
        $("#selectID").multiselect({ multiple: false });

        $("form").bind("submit", function () {
            $("#selectResultID").html(
                "<b>Options selected : </b>" 
                + $(this).serialize());
            return false;
        });
    </script>
</body>

</html>

Output:

When all the options are selected and then un-selected.

Example 2: The following example demonstrates the use of callback functions for handling any type of event triggers. Refer to the output for better understanding.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" 
        href="css/jquery.multiselect.css" />

    <link rel="stylesheet" type="text/css" 
        href="style.css" />

    <link rel="stylesheet" type="text/css" 
        href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />

    <script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
    </script>
    
    <script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
    </script>
    
    <script type="text/javascript" 
        src="src/jquery.multiselect.js">
    </script>
</head>

<body>
    <h2>GeeksForGeeks</h2>

    
<p><b>
        Handling callbacks on 
        Events trigger
    </b></p>

    <br />
    <div id="callbackResultID"></div>

    <form action="#" method="post" 
        style="margin-top:20px">
        
        <select id="multipleSelectID" 
            name="multipleSelect" 
            multiple="multiple" size="5">
            
            <b>Select country:</b><br>
            <option value="america">America</option>
            <option value="china">China</option>
            <option value="japan">Japan</option>
            <option value="australia">Australia</option>
        </select>

        <select id="selectID" name="select" size="5">
            <b>Select city:</b><br>
            <option value="jaipur">Jaipur</option>
            <option value="delhi">Delhi</option>
            <option value="mumbai">Mumbai</option>
            <option value="chennai">Chennai</option>
        </select>
        <div style="height:10px;"></div>
    </form><br>

    <script type="text/javascript">
        $(function () {

            var $callback = $("#callbackResultID");

            $("select").multiselect({
                click: function (event, ui) {
                    $callback.text(ui.value + ' ' +
                        (ui.checked ? 'checked' : 'unchecked'));
                },
                beforeopen: function () {
                    $callback.text("Selectobox will open..");
                },
                open: function () {
                    $callback.text("Selectbox opened!");
                },
                beforeclose: function () {
                    $callback.text(
                        "Before Selectbox to be closed...");
                },
                close: function () {
                    $callback.text("Selectbox closed!");
                },
                checkAll: function () {
                    $callback.text("Check all options click event!");
                },
                uncheckAll: function () {
                    $callback.text("Uncheck all option clicked!");
                },
                optgrouptoggle: function (event, ui) {
                    var values = $.map(ui.inputs, function (checkbox) {
                        return checkbox.value;
                    }).join(", ");

                    $callback.html("<strong>Checkboxes " +
                        (ui.checked ? "checked" : "unchecked") +
                        ":</strong> " + values);
                },
                groupsCollapsable: true,
                beforecollapsetoggle: function () {
                    $callback.text("Before Option group collapsed");
                },
                collapsetoggle: function () {
                    $callback.text("Option group collapsed");
                }
            });

        });
    </script>
</body>

</html>