接待处代码
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 οnclick='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',id:ele.value}, type:'POST', success:function(data){ var areaList = data.list; var ulEle = $("#areas"); ulEle.children().remove(); for(var i=0;i<areaList.length;i++){ ulEle.append("<li οnclick='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 οnclick="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", type); map.put("list", 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内在要求
版权声明：本文博主原创文章，博客，未经同意不得转载。
转载于:https://www.cnblogs.com/bhlsheji/p/4813027.html
相关资源：数据结构—成绩单生成器