用KendoUI实现下来列表的级联

最新推荐文章于 2023-01-17 10:49:08 发布

taihejin

最新推荐文章于 2023-01-17 10:49:08 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： KendoUI

本文链接：https://blog.youkuaiyun.com/taihejin/article/details/17099413

KendoUI 专栏收录该内容

1 篇文章

订阅专栏

本文记录了作者在学习KendoUI过程中，如何花费半天时间成功实现下拉列表的级联功能。通过具体的代码示例，分享了实现这一功能的步骤和经验。

最近在学习KendoUI，花了半天的时间才把下拉列表的级联功能实现，以此文章记之。

具体代码如下:

<input id="province" class="pcc"/>
<input id="city" class="pcc" />
<input id="county" class="pcc" />
<script type="text/javascript">
function provinceChange() {
    var cityBox = $("#city").data("kendoComboBox");
    cityBox.dataSource.read();
    cityBox.text("全部");
    var countyBox = $("#county").data("kendoComboBox");
    countyBox.text("全部");
}
function cityChange() {
    var countyBox = $("#county").data("kendoComboBox");
    countyBox.dataSource.read();
    countyBox.text("全部");
}
$(function(){
  $("#province").kendoComboBox({
          height: 500,
          dataTextField: "name",
          dataValueField: "code",
          placeholder:"选择省/直辖市...",
          change:provinceChange,
          dataSource:{
              transport:{
                  read:"/你的webservice路径/services/rest/projectService/province"
              }
          }
      });
  $("#city").kendoComboBox({
  	    placeholder:"选择地级市...",
		height: 300,
		dataTextField: "name",
        dataValueField: "code",
        change:cityChange,
        dataSource:{
        transport:{
        	read:{
          	 url: "/你的webservice路径/services/rest/projectService/city",
          	 data:function(){
          	 	var p=$("#province").data("kendoComboBox").value();
          	 	return {province:p};
          	 	}
   		  }
   		}
        }
	});
  $("#county").kendoComboBox({
  	    placeholder:"选择县/区..",
		height: 300,
		dataTextField: "name",
        dataValueField: "code",
        dataSource:{
        transport:{
        	read:{
          	 url: "/你的webservice路径/services/rest/projectService/county",
          	 data:function(){
          	 	var p=$("#city").data("kendoComboBox").value();
          	 	return {city:p};
          	 	}
   			}
   		 }
        }
	});
});
</script>

后台要实现相应的方法，完成之后的前台界面如下图所示：