级联 kendoDropDownList，在第一个下拉列表中获取选定的文本

Question

我是 Kendo UI 的新手，在这里了解了我的代码的基础知识：http://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist

我收到了 2 个 api 调用，其中第一个没有参数，return 一个列表，如果项目（Id，名称）第二个 api 调用接受一个 Id，return 一个第二个项目列表（也只是一个带有 Id 和名称的对象）由此我想有 2 个级联 kendo 下拉菜单。但是我的问题是第二个 url 的 id 总是为 null 或空，我不知道什么是正确的语法：

            // First dropdown, all good
            var controllers = $("#Controller").kendoDropDownList({
                optionLabel: "Select controller...",
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read: "/SharedData/GetControllers/"
                    }
                }
            }).data("kendoDropDownList");

            // second dropdown, always hit the api method with the id being null or empty  (depending on syntax for url)
            var actions = $("#Action").kendoDropDownList({
                autoBind: true,
                cascadeFrom: "controllers",
                cascadeFromField: "Id",
                optionLabel: "Select Action...",
                dataTextField: "Id",
                dataValueField: "Name",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        // HELP:  need pass id to this route (which is id of selected controller)
                        read: "/SharedData/GetControllerActions/id=" + $("#Controller").data("kendoDropDownList").text()
                    }
                }
            }).data("kendoDropDownList");

Answer 1

我认为问题在于您的数据源仅设置一次 - 在初始化时 - 而此时下拉列表的值为空。我要做的是在第一个下拉列表中添加一个更改事件，如下所示：

        var controllers = $("#Controller").kendoDropDownList({
            optionLabel: "Select controller...",
            dataTextField: "Name",
            dataValueField: "Id",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: "/SharedData/GetControllers/"
                }
            },
            change: function(e) {
               setSecondDS();
            }
        }).data("kendoDropDownList");

       var setSecondDS = function() {
           //initialize your new kendo datasource here
           var dataSource = new kendo.data.DataSource({
               //your stuff here
               transport:
               serverFiltering:
           });

          $("#Action").data("kendoDropDownList").setDataSource(dataSource); 
       }

级联 kendoDropDownList，在第一个下拉列表中获取选定的文本

Cascading kendoDropDownList, get selected text in first dropdown

cascadingdropdown

kendo-ui