使用ajax创建ul,联合县城市，采用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

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内在要求

版权声明：本文博主原创文章，博客，未经同意不得转载。