二级三级联动实现

参照网址: http://www.helloweba.com/view-blog-188.html

http://www.ijquery.cn/?p=360


test.jsp
二级联动

关于这个联动的实现用到一个插件 jquery.cityselect.js,该插件如下:
/*

settings 参数说明
-----
url:省市数据josn文件路径
prov:默认省份
city:默认城市
dist:默认地区(县)
nodata:无数据状态
required:必选项
------------------------------ */
(function($){
$.fn.citySelect=function(settings){
if(this.length<1){return;};

// 默认值
settings=$.extend({
url:"InfoUtil.action",//此处需要的格式是json格式,
prov:null,
city:null,
dist:null,
nodata:null,
required:true
},settings);

var box_obj=this;
var prov_obj=box_obj.find(".prov");
var city_obj=box_obj.find(".city");
var dist_obj=box_obj.find(".dist");
var prov_val=settings.prov;
var city_val=settings.city;
var dist_val=settings.dist;
var select_prehtml=(settings.required) ? "" : "";
var city_json;

// 赋值市级函数
var cityStart=function(){
var prov_id=prov_obj.get(0).selectedIndex;
if(!settings.required){
prov_id--;
};
city_obj.empty().attr("disabled",true);
dist_obj.empty().attr("disabled",true);

if(prov_id<0||typeof(city_json.citylist[prov_id].c)=="undefined"){
if(settings.nodata=="none"){
city_obj.css("display","none");
dist_obj.css("display","none");
}else if(settings.nodata=="hidden"){
city_obj.css("visibility","hidden");
dist_obj.css("visibility","hidden");
};
return;
};
// 遍历赋值市级下拉列表
temp_html=select_prehtml;
$.each(city_json.citylist[prov_id].c,function(i,city){
temp_html+="";
});
city_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
distStart();
};

// 赋值地区(县)函数
var distStart=function(){
var prov_id=prov_obj.get(0).selectedIndex;
var city_id=city_obj.get(0).selectedIndex;
if(!settings.required){
prov_id--;
city_id--;
};
dist_obj.empty().attr("disabled",true);

if(prov_id<0||city_id<0||typeof(city_json.citylist[prov_id].c[city_id].a)=="undefined"){
if(settings.nodata=="none"){
dist_obj.css("display","none");
}else if(settings.nodata=="hidden"){
dist_obj.css("visibility","hidden");
};
return;
};
// 遍历赋值市级下拉列表
temp_html=select_prehtml;
$.each(city_json.citylist[prov_id].c[city_id].a,function(i,dist){
temp_html+="";
});
dist_obj.html(temp_html).attr("disabled",false).css({"display":"","visibility":""});
};

var init=function(){
// 遍历赋值省份下拉列表
temp_html=select_prehtml;
$.each(city_json.citylist,function(i,prov){
temp_html+="";
});
prov_obj.html(temp_html);

// 若有传入省份与市级的值,则选中。(setTimeout为兼容IE6而设置)
setTimeout(function(){
if(settings.prov!=null){
prov_obj.val(settings.prov);
cityStart();
setTimeout(function(){
if(settings.city!=null){
city_obj.val(settings.city);
distStart();
setTimeout(function(){
if(settings.dist!=null){
dist_obj.val(settings.dist);
};
},1);
};
},1);
};
},1);

// 选择省份时发生事件
prov_obj.bind("change",function(){
cityStart();
});

// 选择市级时发生事件
city_obj.bind("change",function(){
distStart();
});
};

// 设置省市json数据
if(typeof(settings.url)=="string"){
$.getJSON(settings.url,function(json){
city_json=json;
init();
});
}else{
city_json=settings.url;
init();
};
};
})(jQuery);

拼接json的action类部分代码:只要拼接成json格式传递到前台就可以了,方法可以自己写
public String execute() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
StringBuffer json = new StringBuffer("{\"citylist\":[");
json.append("{\"p\":\"区级\",\"c\":[");

String sql = ";
List> list1 = JDBCTool.doSQLQueryList( sql);
for(int i=0,len=list1.size();i
Map map1 = list1.get(i);
json.append("{\"n\":\""+map1.get("xxx")+"\"}");
if (i != list1.size() - 1) {
json.append(",");
}
}
json.append("]},");

String sql2 = "";
List> list2 = JDBCTool.doSQLQueryList(sql2);
json.append("{\"p\":\"乡镇\",\"c\":[");
for(int j=0,len2=list2.size();j
Map map2 = list2.get(j);
String dept_unid = (String)map2.get("xxx");
String sql3 = "";
List> list3 = JDBCTool.doSQLQueryList( sql3);
json.append("{\"n\":\""+map2.get("xxx")+"\",\"a\":[");
for(int k=0,len3=list3.size();k
Map map3 = list3.get(k);
json.append("{\"s\":\""+map3.get("xxx")+"\"}");
if (k != list3.size() - 1) {
json.append(",");
}
}
json.append("]}");
if (j != list2.size() - 1) {
json.append(",");
}
}
json.append("]},");

String sql4 = "";
List> list4 = JDBCTool.doSQLQueryList(sql4);
json.append("{\"p\":\"社会组织\",\"c\":[");
for(int m=0,len4=list4.size();m
Map map4 = list4.get(m);
json.append("{\"n\":\""+map4.get("DEPT_NAME")+"\"}");
if (m != list4.size() - 1) {
json.append(",");
}
}
json.append("]}]}");
PrintUtil.print(response, json.toString());
return null;
}

你可能感兴趣的:(JS,Java,JSP)