Kendo UI Combox 实现级联下拉框

项目中经常遇到级联下拉框的情况，这里使用Kendo UI Combox实现两个下拉框的级联。原理不复杂，通过Web Api获取下拉框数据，第一级下拉框数据改变时，触发第二级下拉框的数据加载，第二级下拉框的数据加载时使用第一级下拉框选中数据作为条件。下面是示例代码的Html部分:

<div class="form-inline">
        <div class="form-group">
        <label  for="FKA">FKA</label>
        <input id="val_FKA" class="form-control" />
            </div>
    
        <div class="form-group">
        <label  for="FKB">FKB</label>
        <input id="val_FKB" class="form-control" />
            </div>
    
     <span id="btnQuery" class="btn btn-default">查询</span>
 </div>

下面是代码的js部分：

            var dropFKA=$("#val_FKA").kendoComboBox({
                 clearButton: true,
                 autoBind: true, 
                 dataTextField: "Text",
                 dataValueField: "Value",
                 height: 600,
                 change: function (e) {
                    dropFKBRefresh();
                }
             }).data("kendoComboBox");

            function dropFKARefresh(){
                dropFKA.setDataSource(
                    {
                     transport: {
                         read: {
                             url: myRoot + "GetFKADictionary",
                             type: "post",
                             dataType: "json"
                         }
                     },
                       change:function(e){
                               dropFKA.trigger("change");
                        }
                );
            }

            
             var dropFKB=$("#val_FKB").kendoComboBox({
                 clearButton: true,
                 autoBind: true, 
                 dataTextField: "Text",
                 dataValueField: "Value",
                 height: 600,
                 change: function (e) {
                }
             }).data("kendoComboBox");

            function dropFKBRefresh(){
                dropFKB.setDataSource(
                    {
                     transport: {
                         read: {
                             url: myRoot + "GetFKBDictionary",
                              data: {
                                 //需要传入第一级下拉框的值作为条件
                                    paras:[
                                        {
                                         "Key": "val_FKA",
                                         "Value": $("#val_FKA").val()
                                         }
                                    ]
                             },
                             type: "post",
                             dataType: "json"
                         }
                     },
                       change:function(e){
                             dropFKB.trigger("change");
                        }
                    }
                );
            }

            dropFKARefresh();