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

//使用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代码

省<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>


市<img class="fl" src="${configBean.speedDomian}/images/pc/arr_down.png" width=10px height=10px/>
<ul id="cities">
</ul>


区<img class="fl" src="${configBean.speedDomian}/images/pc/arr_down.png" width=10px height=10px/>
<ul id="areas">
</ul>

模拟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的对应配置文件片段

<action name="getAjaxJson" class="action.unset.ProjectTraderAction" method="getAjaxJson">
</action>

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

原文链接：https://www.f2er.com/ajax/163656.html

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

猜你在找的Ajax相关文章