How to use jQuery UI MultiSelect Widget ?

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:
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
<!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>
Output:
jQuery-Misc
jQuery-Plugin
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to get the value in an input text box using jQuery ?
jQuery | ajax() Method
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | removeAttr() with Examples
jQuery | parent() & parents() with Examples
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?