Kendo-UI学习 下拉列表kendoDropDownList 三级联动demo

再学习kendoUi的插件中自己写个demo，加深一下印象。
1.前端html代码，当然你必须引用kendo相关的js和css。

<div class="k-content">
     <label>省：</label>
     <input id="province" placeholder="请选择省..." style="width: 200px;" />
     <label>市：</label>
     <input id="city" placeholder="请选择市..." style="width: 200px;" />
     <label>县区：</label>
     <input id="county" placeholder="请选择县区..." style="width: 200px;" />

     <button class="k-button k-primary" id="getAddress">获取选择的值</button>
 </div>

2.js实现

//省
var province = $("#province").kendoDropDownList({
        filter: "startswith",//可以进行筛选
        dataTextField: "name",
        dataValueField: "codeId",
        filter: "contains",
        minLength: 1,
        dataSource:{
            transport: {
                read: {
                    url:  basePath+"address/getByParentId.do",
                    dataType: "json",
                    type: "POST"
                },
                parameterMap:function (options,operation) {
                    options.parentId = 0;
                    return options;
                }
            }
        },
        index:0,
        change:function (e) {
            city.dataSource.read();
        },
        dataBound:function (e) {
            this.select(0)//选中
            city.dataSource.read();
        }
    }).data('kendoDropDownList');
    //市
    var city = $("#city").kendoDropDownList({
        filter: "startswith",
        dataTextField: "name",
        dataValueField: "codeId",
        index:0,
        dataSource:{
            transport:{
                read: {
                    url:  basePath+"address/getByParentId.do",
                    dataType: "json",
                    type: "POST"
                },
                parameterMap:function (options,operation) {
                    options.parentId = $("#province").val();
                    return options;
                }

            }
        },
        change:function (e) {
            county.dataSource.read();
        },
        dataBound:function (e) {
            this.select(0)
            county.dataSource.read();
        }
    }).data('kendoDropDownList');
    //县区
    var county = $("#county").kendoDropDownList({
        filter: "startswith",
        dataTextField: "name",
        dataValueField: "codeId",
        index:0,
        dataSource:{
            transport:{
                read: {
                    url:  basePath+"address/getByParentId.do",
                    dataType: "json",
                    type: "POST"
                },
                parameterMap:function (options,operation) {
                    options.parentId = $("#city").val();
                    return options;
                }

            }
        },
        dataBound:function (e) {
            this.select(0)
        }
    }).data('kendoDropDownList');
    /**
     * 获取地址的选值
     */
    $("#getAddress").on('click',function () {
        alert(province.value()+'--'+city.value()+'--'+county.value());
        alert(province.text()+'--'+city.text()+'--'+county.text());
    })

3.后端接口
controller

@RequestMapping("getByParentId")
public List<AreaModel> getByParentId(Integer parentId){
    if(parentId!=null){
        return this.areaService.getByParentId(parentId);
    }
    return null;
}

service

public List<AreaModel> getByParentId(Integer parentId){
   return this.areaMapper.selectByParentId(parentId);
}

dao

List<AreaModel> selectByParentId(Integer parentId);

sql

<select id="selectByParentId" parameterType="java.lang.Integer" resultMap="BaseResultMap">
    select *
     from imp_area
     where parentId = #{parentId,jdbcType=INTEGER}
 </select>

运行代码，三级联动成功。