2014/4/18 结合easyui的省市区查询 小结

最新推荐文章于 2021-07-20 15:59:51 发布
原创 最新推荐文章于 2021-07-20 15:59:51 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#easyui #combobox #ajax

本文介绍如何使用EasyUI的combobox组件实现省市区三级联动查询功能，包括前端页面设计、AJAX数据交互及动态加载下拉列表的具体实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

笔者最近使用easyui的comboxbox控件进行省市区关联查询，要求是省市区要关联到页面的全局变量g_user，包含（省代码provincCode）,(市代码cityCode),区代码（areaCode）,先把源文件中的全局变量告知：

g_user = {
		provinceCode:'110',
		cityCode:'',
		areaCode:'',
};

先贴关键代码：

1.先定义6个全局变量

var searchProvince=g_user.provinceCode;
var searchCity=g_user.cityCode;
var searchArea=g_user.areaCode;
//对应的省市区列表
var provinceInfo;
var cityInfo;
var areaInfo;
其中：provinceInfo,cityInfo,areaInfo是从数据库取出来的省信息


2.相关的html元素，easyui的conbobox空间就是个动态加载数据显示的select下拉框

<select id="searchProvince" class="easyui-combobox" style="width:80px;" data-options="editable:false">
	<option value="">全部省份</option>
</select>
<select id="searchCity" class="easyui-combobox" style="width:80px;" data-options="editable:false">
	<option value="">全部城市</option>
</select>
<select id="searchArea" class="easyui-combobox" style="width:110px;" data-options="editable:false">
	<option value="">全部区域</option>
</select>

3.省市区查询相关的js代码 

//查询  加载省下拉框  
	$(document).ready(function(){ 
		//加载省份--provinceInfo
		$("#searchCity").combobox('disable');
		$("#searchArea").combobox('disable');
		var params = {
			"provinceCode":g_user.provinceCode,
			"jsoncallback":true
		};
		$.ajax({
			type:'POST',
			url : '${ctxPath}/location/p/queryProvinces.action',
			async:false,
			data: params,
			success:function(data){
				searchBoxProvinceInfo = $.parseJSON(data).data;
				if(g_user.provinceCode != ""){
					$("#searchProvince").combobox("setValue",searchBoxProvinceInfo[0].provinceName);
					searchProvince = searchBoxProvinceInfo[0].provinceCode;
					$("#searchProvince").combobox('disable');
					loadSearchCity();
				}else{
					element = {provinceCode:'all',provinceName:'全部省份'};
					searchBoxProvinceInfo.unshift(element);
					//获取选中省
					$("#searchProvince").combobox({
						data: searchBoxProvinceInfo,
						valueField:'provinceCode',
						textField:'provinceName',
						panelHeight:180,
						defaultText:"请选择",
						onSelect:function(n,o){
							searchProvince=n.provinceCode;
							if(n.provinceCode=='all'){
								clearSearchCity();
								$("#searchCity").combobox('disable');
							}else{
								searchCity = 'all';
								loadSearchCity();
							}
							clearSearchArea();
							$("#searchArea").combobox('disable');
							$('#resourcestable').datagrid('load');
						}
					});
				}
				
			}
		});
		
	});
	
	//查询  加载市下拉框 ---searchCityInfo
	function loadSearchCity(){
		var params = {
			"provinceCode":searchProvince,
			"cityCode":g_user.cityCode,
			"jsoncallback":true
		};
		$.ajax({
			type:'POST',
			url : '${ctxPath}/location/p/queryCitysByProvince.action',
			data: params,
			async:false,
			success:function(data){
				searchCityInfo = $.parseJSON(data).data;
				if(g_user.cityCode != ""){
					$("#searchCity").combobox('setValue',searchCityInfo[0].cityName);
					searchCity = searchCityInfo[0].cityCode;
					loadSearchArea();
				}else{
					element = {cityCode:'all',cityName:'全部城市'};
					searchCityInfo.unshift(element);
					//获取选中市
					$("#searchCity").combobox({
						data: searchCityInfo,
						valueField:'cityCode',
						textField:'cityName',
						panelHeight:'auto',
						onSelect:function(n,o){
							searchCity=n.cityCode;
							if(n.cityCode=='all'){
								clearSearchArea();
								$("#searchArea").combobox('disable');
							}else{
								searchArea = 'all';
								loadSearchArea();
							}
							$('#resourcestable').datagrid('load');
						}
					});
				}
			}
		});
		
	}
	
	//查询  加载区域下拉框
	function loadSearchArea(){
		//加载区信息
		var params = {
			"provinceCode":searchProvince,
			"cityCode":searchCity,
			"areaCode":g_user.areaCode,
			"jsoncallback":true
		};
		$.ajax({
			type:'POST',
			url : '${ctxPath}/location/p/queryAreasByCity.action',
			data: params,
			async:false,
			success:function(data){
				searchAreaInfo = $.parseJSON(data).data;
				if(g_user.areaCode != ""){
					$("#searchArea").combobox('setValue',searchAreaInfo[0].areaName);
				}else{
					element = {areaCode:'all',areaName:'全部区域'};
					searchAreaInfo.unshift(element);
					//获取选中区
					$("#searchArea").combobox({
						data: searchAreaInfo,
						valueField:'areaCode',
						textField:'areaName',
						panelHeight:'auto',
						onSelect:function(n,o){
							searchArea=n.areaCode;
							$('#resourcestable').datagrid('load');
						}
					});
				}
			}
		});
		
	};
	
	//查询  清空 城市下拉框 searchCity
	function clearSearchCity(){
		searchCity='';
		$("#searchCity").combobox({
			data: blankcity,
			valueField:'cityCode',
			textField:'cityName'
		});	
	}
	
	//查询 清空 区域下拉框 searchArea
	function clearSearchArea(){
		searchArea='';
		$("#searchArea").combobox({
			data: blankarea,
			valueField:'areaCode',
			textField:'areaName'
		});
	}

4.相关说明：

4.1首先上来是市和区按钮失效

$("#searchCity").combobox('disable');
$("#searchArea").combobox('disable');


4.2请求数据，传的参数是文章开头的全部变量，表示我只可以查询该省 

var params = {
	"provinceCode":g_user.provinceCode
};

'${ctxPath}/location/p/queryProvinces.action'

这个action请求，表明当g_user.provinceCode为空时查询出来的是全部省信息，否则就是指定的省信息，包括省代码，省名称


4.3处理ajax返回数据

                         searchBoxProvinceInfo = $.parseJSON(data).data;
				if(g_user.provinceCode != ""){
					$("#searchProvince").combobox("setValue",searchBoxProvinceInfo[0].provinceName);
					searchProvince = searchBoxProvinceInfo[0].provinceCode;
					$("#searchProvince").combobox('disable');
					loadSearchCity();
				}else{
					element = {provinceCode:'all',provinceName:'全部省份'};
					searchBoxProvinceInfo.unshift(element);
					//获取选中省
					$("#searchProvince").combobox({
						data: searchBoxProvinceInfo,
						valueField:'provinceCode',
						textField:'provinceName',
						panelHeight:180,
						defaultText:"请选择",
						onSelect:function(n,o){
							searchProvince=n.provinceCode;
							if(n.provinceCode=='all'){
								clearSearchCity();
								$("#searchCity").combobox('disable');
							}else{
								searchCity = 'all';
								loadSearchCity();
							}
							clearSearchArea();
							$("#searchArea").combobox('disable');
							$('#resourcestable').datagrid('load');
						}
					});
				}
对data进行json格式化处理，若要求的省代码不为空，则省下拉框值写死，并进入loadSearchCity（）方法；若要求的省代码为空，既查询省不做限制，则拼加element元素，表示查询所有省信息，并且当省下拉框查询时，获取选中省，传入searchProvince，如果选择的是全部，则清空市下拉选择的值，并且使市下拉失效，区下拉也要清除并且使之失效 


$('#resourcestable').datagrid('load');
调用上述语句重新加载datagrid，效果对应于一旦选择了省，就触发一次省查询的操作


市下拉和区下拉代码原理类似，不赘述

5.页面效果图如图：


其中我的要求是只能查询安徽省的信息


相关前台页面源代码附件供参考：

























easyui实现省市县三级联动
Gorden的博客
12-07 1549
easyui实现三级联动
基于easyui 框架，通过读取json 文件实现省市区三联动的效果
vivian_wang07的博客
11-16 2270
由于项目需要，我们项目是用的easyui 的框架，然后需要用到省市区三联动效果，一般的jQuery 获取json 文件 实现 三联动效果，不能够满足我们的需求，因为我们select 下拉框都是通过easyui combox 效果来实现的，所以我自己写了一个 基于easyui 框架 通过读取json 文件实现省市区三联动效果的脚本，废话不多说，开始讲重点：1.先说一下他实现的思想： 实现三联动效果，
Easyui form combobox省市区三级联动
09-02
主要介绍了Easyui form combobox省市区三级联动 的相关资料,需要的朋友可以参考下
easyUi 省市区联查
qq_38793958的博客
05-14 963
$(function () {    $("#tseProvinceId").combobox({        url:ctx+'/AcquisitionArea/chinaCityService',        valueField:'pid',        textField:'pname',        filter: function(q, row){            var...
Easyui tree实现省市区数据显示和回显功能
weixin_31172555的博客
07-20 661
需要为市场人员分配所属管辖区域，因为管理平台使用的前段框架为easyUI，所以使用easyUI 的tree组件来完成对应的功能。 该功能的实现主要点是省市区的查询（全国省市区数据大概2800多个，需要优化查询逻辑）和后续编辑业务人员信息时，之前所选的区域的回显问题。 页面代码： <tr> <td align ="right">区域：</td> <td > <input id="distNames" name="di
省市区组件
04-12
一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值，而不是仅仅为了赚钱；
EasyUI_前台js_省市县三级联动
weixin_30485291的博客
04-24 244
1、html: 1 <td class="tdl">所属城市</td> 2 <td class="td_detail"> 3 <input id="sheng" /> 4 &nbsp<input id="city" /> 5 &nbsp<input id="x...
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
09-02
在本文中，我们将深入探讨如何使用Java框架SSH（Spring、Struts、Hibernate）与前端UI库Easyui结合，实现省市县三级联动的功能。这个功能在许多Web应用中都非常常见，例如用户填写地址时，需要根据选择的省份动态...
asp.net/vs2010/C#简单三层+easyui权限管理框架
03-25
【标题】：“asp.net/vs2010/C#简单三层+easyui权限管理框架”是一种基于Microsoft的ASP.NET技术，使用Visual Studio 2010开发环境，并结合C#编程语言实现的权限管理系统。该框架的核心是采用了经典的三层架构设计，...
EasyUI Pagination 分页的两种做法小结
01-19
EasyUI 的 datagrid 支持服务器端分页，但是官方的资料比较少，以下总结了两种 datagrid 的服务器端分页机制，一种是datagrid默认机制，另一种是利用 Ajax 获取数据并填充 Datagrid，可根据情况具体使用。...
Easyui实现省市县三级联动
林海潜的博客专栏
03-27 1万+
Easyui调用数据库实现省市县区三级联动的效果如果下 1、首先要设计数据库，如图所示。一个有4个字段code，note，pycode。code：行政区划代码，note：中文注释，pycode：拼音缩写。 其中code是由6个字段组成。如果是省级最后4位是0000，如果是地级市最后2位是00，其他是县区。  我已经把相关数据库代码上传到我的c
ssm+mysql+easyui-tree省市区三级联动
11-20
ssm+mysql+easyui-tree的三级联动,我是将数据拼接后传到前台的，应该还是比较简单易懂的
esayui-全国城市省市区三级级联
03-02
自己搜索整理的基于easyUI，jQuery实现的全国城市省市区三级级联选择，在网上查了好多资料，优化整理了一下，分享给大家。。。
JQuery EasyUI Combobox 实现省市二级联动菜单
pqszq1314的专栏
05-08 8596
JQuery EasyUI Combobox 实现省市二级联动菜单
【easyui】combobox 关于省市联动
终码一生
02-26 2092
最近项目中使用到esayui，一遍学习一遍使用，关于省、市联动效果 //省、市联动 $(function(){ var provinceId = $('#province').combobox({ url:"debtor/getProvinceList!getProvinceList.action", editable:false, valueField:'id', textFi
easyui 下拉选择树(ComboTree) 的实现
热门推荐
i蜗居年华的CODE_HOME
09-04 3万+
很多时候都会用到下拉框, 有时候为了显示更好的效果, 会用到树型下拉框, 实际就是下拉框中带了一个树型的控件, 所以它自然继承自tree和combobox. 一: 前台: 1. 首先从前台来讲, 先把html元素写好 getValue 这里用js加载方式: $('#cc').combotree({ url:'tree_data.json', }); 这里的url是
easyui 下拉框点击区域扩展
jiangzhibang的博客
12-05 211
jquery 代码： 无需点击下拉三角区域，点击输入框即显示下拉面板 $("body").on("click",'.combo-text',function(){ $(this).siblings("span").find("span").click(); });
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值