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