How to use jQuery UI MultiSelect Widget ?
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= <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> |
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= <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> |
Output:
Please Login to comment...