省市縣級聯，使用ajax，並且使用ul類比select下拉，ajaxul

省市縣級聯，使用ajax，並且使用ul類比select下拉，ajaxul

前台代碼

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;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", 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裡面請求