Question

我试图做一个简单的国家代码 - ＆gt;州 - ＆gt;市。在这种情况下，有人可以告诉我这个问题是什么吗？国家列表加载正常，但在选择国家后，州不会被加载，事件也不会被解雇。

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

＆＃39; cascadeFrom＆＃39;给出了父ComboBox而不是它的JQuery选择器的变量引用：请注意，对于您的第一个ComboBox，您有＆＃39; countries = $（＆＃34;＃country＆＃34;）＆＃39;。另一种方法是将第一个ComboBox更改为：

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

然后你的第二个ComboBox会正确连接。应该就这么简单。

Answer 2

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

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

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

KendoUI - 级联问题

2 个答案: