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.
<!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:
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.
<!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: