EasyUI——combobox级联

最新推荐文章于 2021-03-26 16:34:44 发布

牧梦

最新推荐文章于 2021-03-26 16:34:44 发布

阅读量2.7k

点赞数

分类专栏： EasyUI 文章标签： jquery ui easyui

本文链接：https://blog.youkuaiyun.com/fengweimm/article/details/21318241

版权

EasyUI 专栏收录该内容

2 篇文章

订阅专栏

Easy UI的combobox实现省市县的级联选择

js部分：

<script type="text/javascript">
	$(function(){
		var province = $("#province").combobox({
			valueField:'areaId',
			textField:'name',
			url:'do_cascade.jsp?id=0',
			onChange:function(newValue, oldValue){
	            $.get('do_cascade.jsp',{id:newValue},function(data){
	                city.combobox("clear").combobox('loadData',data);
	                county.combobox("clear");
	            },'json');
	        },
	        //使用onSelect不能实现第一层与第三层的联动
			/* onSelect:function(rec){
				var url = "do_cascade.jsp?id="+rec.areaId;
				$("#city").combobox('reload',url);
			}, */
			onLoadSuccess:onLoadSuccess
		});
		var city = $("#city").combobox({
			valueField:'areaId',
			textField:'name',
			/* onSelect:function(rec){
				var url = "do_cascade.jsp?id="+rec.areaId;
				$("#county").combobox('reload',url);
			}, */
			onChange:function(newValue, oldValue){
	            $.get('do_cascade.jsp',{id:newValue},function(data){
	                country.combobox("clear").combobox('loadData',data);
	            },'json');
	        },
			onLoadSuccess:onLoadSuccess
		});
		var country = $("#county").combobox({
			valueField:'areaId',
			textField:'name',
			onLoadSuccess:onLoadSuccess
		});
	});
	function onLoadSuccess(){
		var target = $(this);
		var data = target.combobox("getData");
		var options = target.combobox("options");
		if(data && data.length>0){
			var fs = data[0];
			target.combobox("setValue",fs[options.valueField]);
		}
	}
</script>

html部分

<body>
	省份：<input id="province" style="width: 80px;">
	市区：<input id="city" style="width: 80px;">
	县城：<input id="county" style="width: 80px;">
</body>

jsp处理页面

	String idStr = request.getParameter("id");
	int id=0;
	if(idStr!=null || !idStr.equals("")){
		id = Integer.parseInt(idStr);
	}
	AreaDao ad = new AreaDaoImpl();
	List<Area> areas = ad.findChildById(id);
	Gson gson = new Gson();
	String json = gson.toJson(areas);
	System.out.print(json);
	out.print(json);

sql语句

select * from area where parentid=? order by vieworder

onLoadSuccess方法实现初始化时加载初始数据