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

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