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>

運行代碼，三級聯動成功。