jquery - チェックボックス付き剣道ドロップダウンリスト

Question

良い一日、

チェックボックスのある剣道ドロップダウンリストがあります。ドロップダウンのデータは、SQL データベースのテーブルから取得されます。私の問題は、ドロップダウンリストに表示されないドロップダウンでデータを選択したときです(複数選択機能のように表示したい)。選択したアイテムの値を取得するかどうかはわかりません。

ここに私のコードがあります:

html:

 <input id="dropDownList" runat="server" /> 
<script type="text/x-kendo-template" id="CheckboxTemplate">  <li unselectable="on" class="k-item nowrap check-item">
        <input type="checkbox" name="#= Day #" value="#= ID #" class="check-input" #= "" ? "checked" : "" # />
       <span>#= Day #</span>
        <br/>
<span>#= StartTime #-#= EndTime #</span>
  </li>
   </script>

スクリプト:

                                        <script type="text/javascript">
                                            $(document).ready(function () {
  var clientCusId = $("#clientCusId").val();
                                                var clientId = $("#clientId").val();
                                                var clientCusPosId = $("#clientCusPosId").val();
                                                var data = new kendo.data.DataSource({


                                                    transport: {
                                                        read: {
                                                            url: '/Customer/LoadCustomerPositionShiftList?clientCusId=' + clientCusId + '&clientId=' + clientId + '&clientCusPosId=' + clientCusPosId,
                                                            dataType: "json",
                                                            type: "POST"

                                                        }
                                                    }




                                                });



                                                dropdown = $("#dropDownList").kendoDropDownList({
                                                    dataTextField: "Day",
                                                    dataValueField: "ID",
                                                    optionLabel: {
                                                        Day: "--Select All--",
                                                        StartTime: "",
                                                        EndTime:"",
                                                        ID: ""
                                                    },
                                                    template: $("#CheckboxTemplate").html(),
                                                    dataSource: data,
                                                    select: function (e) {
                                                        e.preventDefault();
                                                    }
                                                }).data("kendoDropDownList");
//it doesn't go here
                                                dropdown.list.find(".check-input,.check-item").bind("click", function (e) {
                                                    var $item = $(this);
                                                    var $input;
                                                    if ($item.hasClass("check-item")) {
                                                        // Text was clicked
                                                        $input = $item.children(".check-input");
                                                        $input.prop("checked", !$input.is(':checked'));
                                                    }
                                                    else
                                                    //  Checkbox was clicked
                                                        $input = $item;
                                                    var val = $input.val();

                                                    //Check all clicked?
                                                    if (val == "")
                                                        dropdown.list.find(".check-input").prop("checked", $input.is(':checked'));
                                                    var ddl = $('#dropDownList').data().kendoDropDownList;
                                                    var model = ddl.dataItem($input.closest('.k-item').index());
                                                    alert(model.text);
                                                    updateDropDown()

                                                    e.stopImmediatePropagation();
                                                });

                                                updateDropDown()
                                            });
                                            function updateDropDown() {
                                                var items = [];

                                                dropdown.list.find(".check-input").each(function () {
                                                    var $input = $(this);
                                                    if ($input.val() != "" && $input.is(':checked'))
                                                        items.push($input.next().text());
                                                });
                                                //    Check the Check All if all the items are checked
                                                $(dropdown.list.find(".check-input")[0]).prop("checked", items.length == dropdown.list.find(".check-input").length - 1);
                                                dropdown.text(items.toString());

                                            }

                                        </script>

誰かがこれで私を助けてくれることを願っています。

これは私の参照です: http://jsfiddle.net/gregmarkv/jNnD5/

http://jsfiddle.net/MG89G/331/