联合县城市，采用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',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  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;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;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;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{ 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<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内在要求

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