如何使用jQuery multiselect同时显示组名和下拉列表项？

Question

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>

Answer 1

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());
        });
    }
});​

JSFiddle link