1

こんにちは私はオプショングループでドロップダウンの複数選択のためにhttp://www.erichynds.com/jquery/jquery-ui-multiselect-widget プラグインを使用しています。

グループ名もアイテムと一緒に表示したい。私が同じように使用した以下のコードを見つけてください。

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

1 に答える 1