接待处代码
js
//采用jquery展示鼠标放到省ul下拉显示
$(“#province”).hover(function(){
$(“#province ul”).toggle();
})
//使用jquery效果展示鼠标放到城市的ul下拉展示
$(“#city”).hover(function(){
$(“#city ul”).toggle();
})
//使用jquery效果展示鼠标放到区县的ul下拉展示
$(“#area”).hover(function(){
$(“#area ul”).toggle();
})
//改变省份触发的函数
function changePro(ele){
$(“#showPro”).text(ele.innerText);
$(“#showCity”).text(“市”);
$(“#showArea”).text(“区”);
$(“#pid”).val(ele.value);
$(“#cid”).val(“”);
$(“#aid”).val(“”);
$.ajax({
url:’getAjaxJson.action’,
data:{type:’city’,id:ele.value},
type:’POST’,
success:function(data){
var cityList = data.list;
var ulEle = $(“#cities”);
ulEle.children().remove();
for(var i=0;i
ulEle.append(”
“+cityList[i].city+””);
}
}
});
}
//改变城市触发的函数
function changeCity(ele){
$(“#showCity”).text(ele.innerText);
$(“#showArea”).text(“区”);
$(“#cid”).val(ele.value);
$(“#aid”).val(“”);
$.ajax({
url:’getAjaxJson.action’,
data:{type:’area’,id:ele.value},
type:’POST’,
success:function(data){
var areaList = data.list;
var ulEle = $(“#areas”);
ulEle.children().remove();
for(var i=0;i
ulEle.append(”
“+areaList[i].area+””);
}
}
});
}
//改变区县触发的函数
function changeArea(ele){
$(“#showArea”).text(ele.innerText);
$(“#aid”).val(ele.value);
}
html代码
省
- ${province.province}
市
区
模拟select下拉的css代码
.list_title_1{ 200px; height:50px; border:1px solid #d6d6d6; line-height:34px; text-indent:10px; font-size:14px; color:#999; cursor:pointer; margin-top:-7px;}
.list_title_1 span{ 70px; margin-left:0px;}
.list_title_1 img{ float:right; margin:15px 5px 0 0}
.list_title_1 ul{ display:none; 200px; position:absolute; border:1px solid #d6d6d6; border-bottom:none; margin-top:34px; margin-left:-1px;}
.list_title_1 ul li{ 100%; height:34px; line-height:36px; border-bottom:1px solid #d6d6d6; background:#fff; cursor:pointer}
.list_title_1 ul li:hover{ background:#43B1E8; color:#fff;}
获取城市，区县的java代码
public void getAjaxJson(){//此处使用的struts2的框架
try {
HttpServletResponse response = getResponse();
response.setContentType(“application/json;charset=UTF-8”);
PrintWriter out = response.getWriter();
String type = getRequest().getParameter(“type”);
String id = getRequest().getParameter(“id”);
Map map = new HashMap();
JSONObject jo = null;
if(type!=null&&”city”.equals(type)){
hql=”from cities where provinceid='” + id + “‘”;
List list = cdao.getListObj(hql,new cities());
map.put(“type”, type);
map.put(“list”, list);
jo = JSONObject.fromObject(map);
}else if(type!=null&&”area”.equals(type)){
hql=”from areas where cityid='” + id + “‘”;
List list = cdao.getListObj(hql,new areas());
map.put(“type”, type);
map.put(“list”, list);
jo = JSONObject.fromObject(map);
}
String str = jo.toString();
out.print(str);
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
//相应stuts2的相应配置文件片段
说明 下拉的省部件放置request域内。不要把ajax内在要求
版权声明：本文博主原创文章，博客，未经同意不得转载。