本文介绍如何利用jQuery实现城市三级联动，并结合机构数据实现四级联动的效果。首先，需要引入jQuery库并准备符合格式的数据。接着，详细阐述了城市数据和机构数据的结构。然后，展示了前端代码如何显示并处理这些数据。最后，提到了后端如何处理数据以支持前端的功能。
需要的：jquery ，数据data 按格式；
1.引入jqurey
<script type="text/javascript" src="/static/jquery.js" charset="utf-8"></script>
2.处理好数据格式
2.1城市数据格式：
2.2：机构 list
3. 显示 结果
4 代码
4.1前端代码：
<style>
._adrres_select{ padding:3px 0; width:60px; }
._s1{width:60px; }
._s2{width:80px; }
._s3{width:100px; }
</style>
<pv:SessionUser id="User"/>
<!--用法示例 其中 复制下面的 代码input select, id 不能改变 name 样式自定义，_setVal()方法 必须重写-->
<!-- 将此代码引入所需页面 include file="/modules/user/AdrresOrgSelect.js.jsp"%> -->
<div style="height: 40px; margin: 20px;">
<input type="hidden" id="_addressCode" value=""/>
<select id="_province" class="_adrres_select">
</select>
<select id="_city" class="_adrres_select _s1">
<option value="请选择">--市区--</option>
</select>
<select id="_town" class="_adrres_select _s2">
<option value="请选择">--县区--</option>
</select>
<select id="_org" class="_adrres_select _s3">
<option value="请选择">--机构--</option>
</select>
</div>
<!-- //查赋值方法 此方法必须重写（如果无值 写空方法 请勿随意赋值空）
//function _setVal(){
/*
//请根据自己的返回值进行复制 如果没有的项请删除
_Upro=pro;//当前省份
_Ucity=city;//当前市区
_Udis=dis;//当前县级
_QorgCode=org;//当前机构
*/
//}
-->
<script type="text/javascript">
/// adrres/org/select
var _Urole='${User.roles}';
var _Uorg='${User.orgCode}';
/* 全局变量 */
var _NOW_AreaCode='';//当前选择额 code （选择的最下面一级）
var _Upro=_Uorg.substring(0,2);//当前省份
var _Ucity=_Uorg.substring(0,4);//当前市区
var _Udis=_Uorg.substring(0,6);//当前县级
var _QorgCode='';//当前机构
$(document).ready(function(){
_setVal()
_setAdrresSelect();
})
//查赋值方法
function _setVal(){
/* 请根据自己的返回值进行复制 */
/* _Upro=pro;//当前省份
_Ucity=city;//当前市区
_Udis=dis;//当前县级
_QorgCode=org;//当前机构 */
}
function _setAdrresSelect(){
var url= webRootPath + "/adrres/org/select.js";
var data={};
$.hPost(url,data,function(status,detail,data){
var provinceList=data.list;
var orgList=data.orgList;
console.log(provinceList)
console.log(orgList)
//----------- 数据处理开始-------------
var province=$("#_province"),city=$("#_city"),town=$("#_town"),org=$("#_org"),_addressCode=$("#_addressCode");
//console.log(_Upro+"----"+_Ucity+"----"+_Udis)
var provinceVal,cityVal,townVal,cityIndex; //定义三个全局变量 获取当前的数据
cityIndex=0;
//添加
function addSearch(el,value,code){
var optionStr="";
optionStr="<option value="+code+">"+value+"</option>";
el.append(optionStr);
}
//移出
function removeEl(el){
el.find("option").remove();
var optionStar="<option value="+"请选择"+">"+"请选择"+"</option>";
el.append(optionStar);
}
/*根据角色判断开始 */
if(_Urole==1 || _Urole==0 || _Urole==8 ){
//预处理省
for(var i=0;i<provinceList.length;i++){
addSearch(province,provinceList[i].name,provinceList[i].code);
}
//预处理市区
$.each(provinceList[cityIndex].cityList,function(i,item){
addSearch(city,item.name,item.code)//将id为city的select标签增加option选项
})
//预处机构
$.each(orgList,function(i,item){
if(_Upro == item.area_code_p){//找到toen选项的area_code=机构list的val
addSearch(org,item.site_name,item.site_code)//将id为town的select标签增加option选项
}
})
_NOW_AreaCode=_Upro;
}
if(_Urole==2){
//预处理省
for(var i=0;i<provinceList.length;i++){
addSearch(province,provinceList[i].name,provinceList[i].code);
}
//预处理市区
var townIndex;
$.each(provinceList[cityIndex].cityList,function(i,item){
if(item.code!=null && item.code!=undefined && item.code!=""){
addSearch(city,item.name,item.code)//将id为city的select标签增加option选项
}
if(item.code==_Ucity){
townIndex=i;
}
})
//fuzhi city
city.val(_Ucity)
//预处理县区
$.each(provinceList[cityIndex].cityList[townIndex],function(i,item){//此时cityIndex依旧是之前的cityIndex,遍历该索引下的对象的cityList数组
for(var i=0;i<item.length;i++){
if(item[i].code!=null && item[i].code!=undefined && item[i].code!="" && item.area_code_c!='5388' && item.area_code_c!='5399'){
addSearch(town,item[i].name,item[i].code)
}
}
});
//预处机构
$.each(orgList,function(i,item){
if(_Ucity == item.area_code_c && item.area_code_c!='5388' && item.area_code_c!='5399'){//找到toen选项的area_code=机构list的val
addSearch(org,item.site_name,item.site_code)//将id为town的select标签增加option选项
}
})
_NOW_AreaCode=_Ucity;
province.prop("disabled", "disabled");
city.prop("disabled", "disabled");
}
if(_Urole==3){
//预处理省
for(var i=0;i<provinceList.length;i++){
addSearch(province,provinceList[i].name,provinceList[i].code);
}
//预处理市区
var townIndex;
$.each(provinceList[cityIndex].cityList,function(i,item){
addSearch(city,item.name,item.code)//将id为city的select标签增加option选项
if(item.code==_Ucity){
townIndex=i;
}
})
//fuzhi city
city.val(_Ucity)
//预处理县区
var orgIndex;
$.each(provinceList[cityIndex].cityList[townIndex],function(i,item){//此时cityIndex依旧是之前的cityIndex,遍历该索引下的对象的cityList数组
for(var i=0;i<item.length;i++){
if(item[i].code!=null && item[i].code!=undefined && item[i].code!=""){
addSearch(town,item[i].name,item[i].code)
if(item[i].code==_Udis){
orgIndex=i;
}
}
}
});
town.val(_Udis)
//预处机构
$.each(orgList,function(i,item){
if(_Udis == item.area_code_d && item.area_code_c!='5388' && item.area_code_c!='5399'){//找到toen选项的area_code=机构list的val
addSearch(org,item.site_name,item.site_code)//将id为town的select标签增加option选项
}
})
_NOW_AreaCode=_Udis;
province.prop("disabled", "disabled");
city.prop("disabled", "disabled");
town.prop("disabled", "disabled");
}
/* ------------角色判断结束------- */
//--------------
if(_QorgCode!=""){org.val(_QorgCode)}
/* 省级 */
province.on('change',function(){
provinceVal=$(this).val();//获取当前的省区name
_NOW_AreaCode=townVal;
$.each(provinceList,function(i,item){ // 遍历循环provinceList数组 i 是索引 item是索引值
if(provinceVal==item.code){ //遍历数组，如果找到当前的省区与数组中的name对应
cityIndex=i;
return cityIndex //停止循环 返回索引
}
}); //此时当我们选择省区时 确定了数组中的索引位置
//此时我们清空后面两个select的选择
removeEl(city);
removeEl(town);
removeEl(org);
//既然确认了索引 就可以添加数据到第二个select
$.each(provinceList[cityIndex].cityList,function(i,item){
addSearch(city,item.name,item.code)//将id为city的select标签增加option选项
})
//机构处理
$.each(orgList,function(i,item){
addSearch(org,item.site_name,item.site_code)//将id为city的select标签增加option选项
})
})
/* 市级 */
city.on("change",function(){ //当市区选项发生改变的时候
cityVal=$(this).val(); //获取当前的市区选项
_NOW_AreaCode=townVal;
removeEl(town); //此时我们清空第三个select的option
$.each(provinceList[cityIndex].cityList,function(i,item){//此时cityIndex依旧是之前的cityIndex,遍历该索引下的对象的cityList数组
if(cityVal == item.code && item.code!='5388' && item.code!='5399'){ //找到第二个select的val与数组中的val相同的){ //找到第二个select的val与数组中的val相同的
for(var n=0;n<item.disList.length;n++){ //遍历增加数据
addSearch(town,item.disList[n].name,item.disList[n].code)
}
}
});
//机构处理
removeEl(org);
$.each(orgList,function(i,item){
if(cityVal == item.area_code_c){//找到城市选项的area_code=机构list的val
addSearch(org,item.site_name,item.site_code)//将id为city的select标签增加option选项
}
})
});
/* 县级 */
town.on("change",function(){ //当县级选项发生改变的时候
townVal=$(this).val(); //获取当前的县级选项
_NOW_AreaCode=townVal;
//机构处理
removeEl(org);
$.each(orgList,function(i,item){
if(townVal == item.area_code_d && item.area_code_c!='5388' && item.area_code_c!='5399'){//找到城市选项的area_code=机构list的val
addSearch(org,item.site_name,item.site_code)//将id为city的select标签增加option选项
}
})
});
/* 机构 */
org.on("change",function(){ //当机构项发生改变的时候
_NOW_AreaCode=$(this).val(); //获取当前机构级选项
if(_QorgCode!=""){
_NOW_AreaCode=_QorgCode;
}
});
_addressCode.val(_NOW_AreaCode);
//----------- 数据处理end-------------
///
})
}
</script>
4.2 后端处理数据：
/*机构数据*/
String sqlorg="select site_name,site_code,area_code_p,city,area_code_c,area_code_d,district from art_org_info where 1=1 and site_code is not null group by site_code ";
List<Map<String, Object>> orgListdata=new ArrayList<Map<String, Object>>();
orgListdata=SqlDAL.getInstance().queryRowsBySql(sqlorg, null);
/*市级数据*/
String sqlcity="select city,area_code_c from art_org_info where 1=1 and area_code_c is not null group by area_code_c ";
List<Map<String, Object>> cityListdata=new ArrayList<Map<String, Object>>();
cityListdata=SqlDAL.getInstance().queryRowsBySql(sqlcity, null);
/*县级数据*/
String sqldis="select area_code_c,area_code_d,district from art_org_info where 1=1 and area_code_d is not null group by area_code_d";
List<Map<String, Object>> disListdata=new ArrayList<Map<String, Object>>();
disListdata=SqlDAL.getInstance().queryRowsBySql(sqldis, null);
/*1.机构*/
/*3.市级*/
List<Object> cityList=new ArrayList<Object>();
// cityListdata.add(cityListdata);
for(int i=0;i<cityListdata.size();i++){
Map<String, Object> citym=new HashMap<String, Object>();
/*2.县级*/
List<Object> disList=new ArrayList<Object>();
for(int j=0;j<disListdata.size();j++){
if(cityListdata.get(i).get("area_code_c").equals(disListdata.get(j).get("area_code_c"))){
Map<String, Object> dism=new HashMap<String, Object>();
dism.put("name", disListdata.get(j).get("district"));
dism.put("code", disListdata.get(j).get("area_code_d"));
disList.add(dism);
}
}
citym.put("name", cityListdata.get(i).get("city"));
citym.put("code", cityListdata.get(i).get("area_code_c"));
citym.put("disList", disList);
cityList.add(citym);
}
/*最终数据*/
List<Object> list=new ArrayList<Object>();
/*1.省级*/
Map<String, Object> prom=new HashMap<String, Object>();
prom.put("name", "云南");
prom.put("code", "53");
prom.put("cityList", cityList);
list.add(prom);
/* System.out.println("云南data:"+list); */
Map<String, Object> data=new HashMap<String, Object>();
data.put("list",list);
data.put("orgList",orgListdata);
return data;
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
