Hi i am using http://www.erichynds.com/jquery/jquery-ui-multiselect-widget plugin for multiselect of dropdown with option group.
I want to display group name also along with items. please find the code below which i used for the same.
<script type="text/javascript">
$(document).ready(function () {
$(".multiselect").multiselect({
selectedList: 10,
noneSelectedText: 'Select Options',
header: false,
show: ['slide', 100],
hide: ['explode', 100], //explode,bounce
height: 200,
multiple: true,
autoOpen: false,
position: {
my: 'center',
my: 'top',
at: 'center',
at: 'bottom'
}
});
var target = $('#<%=hdnftest.ClientID %>');
var a = "";
$(".multiselect").multiselect().bind("multiselectclick multiselectcheckall multiselectuncheckall", function (event, ui) {
var checkedValues = $.map($(this).multiselect("getChecked"), function (input) {
return (input.value + ':' + input.title);
});
target.val(
checkedValues.length
? checkedValues.join(', ')
: 'Please select a checkbox'
);
}).triggerHandler("multiselectclick");
$(".multiselect").multiselect("close");
});
</script>
<select class="multiselect" multiple="multiple">
<optgroup label="EAST">
<option>Testing1</option>
<option>Testing2</option>
<option>Testing3</option>
<option>Testing4</option>
</optgroup>
<optgroup label="NORTH">
<option>Testing5</option>
<option>Testing6</option>
<option>Testing7</option>
<option>Testing8</option>
</optgroup>
<optgroup label="SOUTH">
<option>Testing9</option>
<option>Testing10</option>
<option>Testing11</option>
<option>Testing12</option>
</optgroup>
</select>
You can handle create event of multiselect widget and change labels for checkboxes in it:
$(".multiselect").multiselect({
selectedList: 10,
noneSelectedText: 'Select Options',
header: false,
show: ['slide', 100],
hide: ['explode', 100],
//explode,bounce
height: 200,
multiple: true,
autoOpen: false,
position: {
my: 'center',
my: 'top',
at: 'center',
at: 'bottom'
},
create: function(event, ui) {
var checkBoxes = $(this).multiselect("widget").find(":checkbox");
checkBoxes.each(function() {
var caption = $(this).next("span");
var groupText = $(this).parents("li").prevAll(".ui-multiselect-optgroup-label:first").text();
caption.text(groupText + " - " + caption.text());
});
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.