Question

在顶部列表框中单击Role1时，它将一次显示Person 1和Person 2。每次对Role1或Role2的单击都会在其下面的列表框中生成一个附加副本。这是为什么？我尝试了KH_ClearKendoListbox中各部分的所有可能排列以清除列表框在继续之前，但这似乎没有帮助。在Stack Overflow上对此问题的另一个参考建议使用setDataSource，但这无济于事。我被困住了，很想知道在这种情况下为什么会发生这种情况以及如何解决这个问题，因此始终在底部列表框中只有一组两项。

    <html>
    <head runat="server">
        <script type="text/javascript">
            $(document).ready(function () {
                var initDS;
                var rolesDS = initDS = new kendo.data.DataSource({
                    data: [{ id1: 3, name1: "Role1" },
                           { id1: 4, name1: "Role2" }]
                });
                $("#lstRoles").kendoListBox({
                    dataValueField: "id1",
                    dataTextField: "name1",
                    dataSource: rolesDS,
                    change: onChangeRoles,
                }).data("kendoListBox");

                function onChangeRoles(e) {
                KH_ClearKendoListbox($("#lstIndividuals"));
                initDS = new kendo.data.DataSource({
                    data: [{ id2: 3, name2: "Person 1" },
                           { id2: 4, name2: "Person 2" }]
                });
                $("#lstIndividuals").kendoListBox({
                    dataValueField: "id2",
                    dataTextField: "name2",
                }).data("kendoListBox").setDataSource(initDS);
            }
            function KH_ClearKendoListbox(lst) {
                var listBox = lst.data("kendoListBox");
                if (listBox === undefined) return;
                var itemcount = listBox.dataSource._data.length;
                for (var i = 0; i < itemcount; i++)
                    listBox.remove(listBox.items().first());
                listBox.refresh();
                listBox.clearSelection();
                listBox.destroy();
            }
        });
        </script>
    </head>
    <body>
        <form id="form2" runat="server" 
        style="background-color: cornflowerblue">
            <div class="container" style="padding:30px">
                <select id="lstRoles" style="width: 265px"></select>
                <br />
                <select id="lstIndividuals" style="width: 
                265px; height: 233px"> 
                </select>
            </div>
        </form>
    </body>
    </html>

Answer 1

将列表框的定义从on change事件中拉出，然后仅在onchange事件中设置数据即可解决问题。所以这是回答：）

    $(document).ready(function () {
        var rolesDS = initDS = new kendo.data.DataSource({
                data: [
                    { id1: 3, name1: "Role1" },
                    { id1: 4, name1: "Role2" }
                ]
            });
        $("#lstRoles").kendoListBox({
            dataValueField: "id1",
            dataTextField: "name1",
            dataSource: rolesDS,
            change: onChangeRoles,
        }).data("kendoListBox");

        var ds;
        var listbox = $("#lstIndividuals").kendoListBox({
            dataValueField: "id2",
            dataTextField: "name2",
            dataSource: ds
        }).data("kendoListBox");

        function onChangeRoles(e) {

            var list = $("#lstRoles").data("kendoListBox");
            var selectedRow = list.select();
            var selectedData = e.sender.dataSource._data[selectedRow.index()];
            if (selectedData.id1 == 3) {
                ds = new kendo.data.DataSource({
                    data: [
                        { id2: 1, name2: "Person 1" },
                        { id2: 2, name2: "Person 2" }
                    ]
                });
            }
            if (selectedData.id1 == 4) {
                ds = new kendo.data.DataSource({
                    data: [
                        { id2: 3, name2: "Person 3" },
                        { id2: 4, name2: "Person 4" }
                    ]
                });
            }
            listbox.setDataSource(ds);
        }
    });

Kendo列表框选择在单独的列表框中生成重复的条目

1 个答案: