javascript - Kendo UI - 级联问题

Question

我正在尝试编写一个简单的代码，采用“国家/地区”->“州”->“城市”。有人可以告诉我这个案例有什么问题吗？国家/地区列表加载正常，但选择国家/地区后，州/省/自治区/直辖市不会加载，也不会触发事件。

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

Answer 1

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

cascadeFrom: "country"

至

cascadeFrom: "countries"

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

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

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