Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  
    <script type="text/javascript" src=
    </script>
  
    <script type="text/javascript" src=
    </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>

chevron_right


Output:

options selected from dropdown

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  
    <script type="text/javascript" src=
    </script>
      
    <script type="text/javascript" src=
    </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>

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :