easyui的combobox的3级联动（最常用的就是省市区3级联动）

最新推荐文章于 2021-01-15 10:57:17 发布

weixin_34067049

最新推荐文章于 2021-01-15 10:57:17 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

文章标签： c# json python

原文链接：https://my.oschina.net/lenglingx/blog/1606753

本文介绍如何实现EasyUI框架中Combobox组件的3级联动效果，并提供了完整的示例代码及静态数据配置。联动通常应用于地区选择，如省份、城市、区县的选择。

2019独角兽企业重金招聘Python工程师标准>>>

easyui的combobox的3级联动（最常用的就是省市区3级联动）

easyui-combobox-3级联动.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="<%=basePath%>jslib/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>jslib/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>jslib/easyui/demo/demo.css">
<script type="text/javascript" src="<%=basePath%>jslib//easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>jslib/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>jslib/easyui/locale/easyui-lang-zh_CN.js"></script>

<title>easyui-combobox-3级联动</title>

<script type="text/javascript">

	$(function(){
		$('#txtSheng').combobox();
		$('#txtShi').combobox({disabled:true});
		$('#txtQu').combobox({disabled:true});
		
		$("#txtSheng").combobox({
			valueField:'id',    
	        textField:'text',  
	        url:'combobox-sheng.json',
	        onSelect:function(record){
	        	$('#txtShi').combobox({
		        	disabled:false,
		        	url:"combobox-shi.json",
		        	valueField:'id',
		        	textField:'text',
		        	onSelect:function(record){
		        		$('#txtQu').combobox({
			        		disabled:false,
				        	url:"combobox-qu.json",
				        	valueField:'id',
				        	textField:'text'
				        });
		        			
		        	}
	        	}).combobox('clear');
	        	
                //1级选择后把3级关闭，如果有多级后面的都关闭
	        	$('#txtQu').combobox({
		        	disabled:true
	        	}).combobox('clear');
	        	
	        }
		});
	})


</script>
</head>
<body>

    easyui combobox 3级联动:<br>
请选择所在地址:<input id="txtSheng" style="width:170px;"><input id="txtShi" style="width:170px;"><input  id="txtQu" style="width:170px;">


	<script type="text/javascript">
	
	</script>
</body>
</html>

模拟数据是静态的数据，正常情况是编写个controller或者servlet来接收上一个combobox的数据，根据数据返回与之对应的数据。

combobox-sheng.json:

[{"id":"11","text":"北京市"},{"id":"12","text":"上海市"},{"id":"13","text":"天津市"},{"id":"14","text":"重庆市"},{"id":"15","text":"河北省"},{"id":"16","text":"四川省"}]

combobox-shi.json:

[{"id":"1501","text":"石家庄市"},{"id":"1502","text":"唐山市"},{"id":"1503","text":"秦皇岛市"},{"id":"1504","text":"邯郸市"},{"id":"1505","text":"邢台市"},{"id":"1506","text":"保定市"},{"id":"1507","text":"张家口市"}]

combobox-qu.json:

[{"id":"150101","text":"阳原县"},{"id":"150102","text":"怀安县"},{"id":"150103","text":"万全县"},{"id":"150104","text":"怀来县"},{"id":"150105","text":"涿鹿县"},{"id":"150106","text":"赤城县"},{"id":"150107","text":"崇礼县"}]

controller的写法：
getSheng()，无参返回全部的省； getShi(sheng)，传入省返回这个省所有市； getQu(shi)，传入市返回这个市所有区。

注：
由于easyui使用的数据是json，还可以使用ajax提交返回的数据为data,通过data.unshift({"id":"0","text":"全部"}); 这样可以在combobox里多出来个全部，值为0。这个用于查找提交参数时还是很有用的，当然也可以在controller返回数据时添加也一样。

转载于:https://my.oschina.net/lenglingx/blog/1606753