省市县级联，使用ajax，并且使用ul模拟select下拉

前台代码

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<cityList.length;i++){
ulEle.append("<li onclick='changeCity(this)' value=" + cityList[i].cityid + "style='border: 0px'>"+cityList[i].city+"</li>");
}
}
});
}
//改变城市触发的函数
function changeCity(ele){
$("#showCity").text(ele.innerText);
$("#showArea").text("区");
$("#cid").val(ele.value);
$("#aid").val("");
$.ajax({
url:'getAjaxJson.action',
data:{type:'area',
success:function(data){
var areaList = data.list;
var ulEle = $("#areas");
ulEle.children().remove();
for(var i=0;i<areaList.length;i++){
ulEle.append("<li onclick='changeArea(this)' value=" + areaList[i].areaid + "style='border: 0px'>"+areaList[i].area+"</li>");
}
}
});
}
//改变区县触发的函数
function changeArea(ele){
$("#showArea").text(ele.innerText);
$("#aid").val(ele.value);
}
html代码

<span class="list_title_1 fl" id="province">
<span class="fl" id="showPro" style="font-size:18px;padding-top:5px;width:170px;float:left">省</span><img class="fl" src="${configBean.speedDomian}/images/pc/arr_down.png" width=10px height=10px/>
<ul>
<c:forEach items="${provinceList}" var="province">
<li onclick="changePro(this)" style="border: 0px" value="${province.provinceid}">${province.province}</li>
</c:forEach>
</ul>
</span>
<span class="list_title_1 fl" style="margin-left:12px;" id="city">
<span class="fl" id="showCity" style="font-size:18px;padding-top:5px;width:180px">市</span><img class="fl" src="${configBean.speedDomian}/images/pc/arr_down.png" width=10px height=10px/>
<ul id="cities">
</ul>
</span>
<span class="list_title_1 fl" style="margin-left:12px;" id="area">
<span class="fl" id="showArea" style="font-size:18px;padding-top:5px;width:180px">区</span><img class="fl" src="${configBean.speedDomian}/images/pc/arr_down.png" width=10px height=10px/>
<ul id="areas">
</ul>
</span>

模拟select下拉的css代码

.list_title_1{ width: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{ width:70px; margin-left:0px;}
.list_title_1 img{ float:right; margin:15px 5px 0 0}
.list_title_1 ul{ display:none; width:200px; position:absolute; border:1px solid #d6d6d6; border-bottom:none; margin-top:34px; margin-left:-1px;}
.list_title_1 ul li{ width: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<String,Object> map = new HashMap<String,Object>();
JSONObject jo = null;
if(type!=null&&"city".equals(type)){
hql="from cities where provinceid='" + id + "'";
List<cities> 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<areas> list = cdao.getListObj(hql,new areas());
map.put("type",list);
jo = JSONObject.fromObject(map);
}
String str = jo.toString();
out.print(str);
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}

//对应stuts2的对应配置文件片段

<!-- 获取省市json -->
<action name="getAjaxJson" class="action.unset.ProjectTraderAction" method="getAjaxJson">
</action>

说明 下拉的省份是放在request域里面的，没有放到ajax里面请求

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!