Kendo UI - Cascade Issue答案

【问题标题】：KendoUI - Cascade IssueKendo UI - Cascade Issue
【发布时间】：2016-08-27 06:46:19
【问题描述】：

我正在尝试使用 Country -> State -> City 的简单代码。有人可以告诉我在这种情况下有什么问题吗？国家/地区列表加载正常，但选择国家/地区后，州不会加载，事件也不会触发。

<script>
        var country = $('#inputCountry option:selected').val();
        $(document).ready(function(){
            var countries = $("#country").kendoComboBox({
                autoBind:false,
                placeholder: "Select Country",
                dataTextField: "countryName",
                suggest:true,
                dataValueField: "geonameId",
                dataSource: {
                    transport: {
                        dataType: "json",
                        read: {
                            url: "http://api.geonames.org/countryInfoJSON",
                            data: {
                                username: "kirobo"
                            },
                            cache:false,
                        }
                    },

                    schema : {
                        model: {
                            children: "geonames"
                        },
                        data: function(response) {
                            return response.geonames;
                        }
                    }
                }
            }).data("kendoComboBox");
            var state = $("#state").kendoComboBox({
                autoBind: false,
                suggest: true,
                cascadeFrom: "country",
                placeholder: "Select State",
                dataTextField: "name",
                dataValueField: "geonameId",
                dataSource: {
                    transport: {
                        dataType: "json",
                        read: {
                            url: "http://api.geonames.org/childrenJSON",
                            data: {
                                    username: "kirobo",
                                    geonameId: getCountry()
                                },
                            cache:false,

                        },
                        parameterMap: function(data, type) {
                            return {
                                username: "kirobo",
                                geonameId: getCountry()
                            }
                        }

                    },
                    cache:false,
                    schema : {
                        data: function(response) {
                            return response.geonames;
                        }
                    }
                }
            }).data("kendoComboBox");
            var cities = $("#city").kendoComboBox({
                suggest:true,
                autoBind: false,
                cascadeFrom: "state",
                placeholder: "Select City",
                dataTextField: "name",
                dataValueField: "geonameId",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        dataType: "json",
                        read: {
                            url: "http://api.geonames.org/childrenJSON",
                            data: {
                                username: "kirobo",
                                geonameId: getState()
                            },
                            cache:false,

                        },
                        parameterMap: function(data, type) {

                            return {
                                username: "kirobo",
                                geonameId: getState()
                            }
                        }

                    },

                    schema : {

                        data: function(response) {
                            return response.geonames;
                        }
                    }
                }
            }).data("kendoComboBox");
            function getCountry() {
                var combo = $("#country").data("kendoComboBox");
                return combo.value();
            }

            function getState() {
                var combo = $("#state").data("kendoComboBox");
                return combo.value();
            }
        });


    </script>

【问题讨论】：

标签： javascript jquery json kendo-ui

【解决方案1】：

在状态的第二个 ComboBox 定义中，更改：

cascadeFrom: "country"

到

cascadeFrom: "countries"

'cascadeFrom' 提供了父 ComboBox 的变量引用，而不是其 JQuery 选择器：请注意，对于您的第一个 ComboBox，您有 'countries = $("#country")'。另一种方法是将第一个 ComboBox 更改为：

var country = $("#country").kendoComboBox({

您的第二个 ComboBox 将按原样正确连接。应该就这么简单。

【讨论】：

【解决方案2】：

您应该使用 kendoComboBox 对象，而不是使用级联字段中的组合框元素。

var countries = $("#country").data(".kendoComboBox"); var state = $("#state").kendoComboBox({ cascadeFrom: "countries" });

您应该在 cascadeFrom 字段中使用该国家/地区对象。就是这样。

【讨论】：