省级联动(使用ajax实现)

在博客园学习了很多实用的东西，现在该慢慢开始自己写写博客文章，由于本人水平有限，刚走出校园的小菜鸟，另外，文章在表述和代码方面如有不妥之处，欢迎批评指正。留下你

的脚印，欢迎评论！

有什么问题，可以互相探讨，希望对各位有所帮助。开始讲东西吧

一个现实城市下拉框的界面

html代码：

 <table>            <tr>                <td><h5>城市下拉框</h5></td>                <td>                    <select id="top" style="width:130px">                        <option>请选择省市/其他...</option>                    </select>                        <select id="center" style=" width:130px">                        <option >请选择城市/其他...</option>                    </select>                        <select id="button" style=" width:130px">                        <option>请选择县/区...</option>                        </select>                </td>            </tr></table>

js代码：我这里使用的jquery操作Dom和ajax，所以要导入jquery脚本，这里就不提供了，到官方网站下载都有

<script type="text/javascript">    $(function() {        // setCity("top", "0");//页面加载时就现实数据库第一个数据，一定要加上        setCity("top", "0");        $("#top").change(function() {            // 当省级改变的时候，让市级和县级文本清空            $("#center option").remove();            $("#button option").remove();             //获得省级的id            var pid=$("#top option:selected").attr("id");             //加载该省级的市级数据            setCity("center", pid);        });        $("#center").change(function() {             //当市级改变的时候，让县级文本清空             $("#button option").remove();            //获取城市的pid            var pid=$("#center option:selected").attr("id");            //加载该省市级的县级数据            setCity("button",pid );        });    });    //selectid:select标签的id，pid数据库省级县级的pid    function setCity(selectid, pid) {        $.ajax({            url : "/code_20150406(Ajax_XStream_Json)/CtiyServlet?pid="+pid,            type : "get",            cache : false,            success : function(res) {                //注意!!!这里必须使用eval(res)函数，否则获取到的json数据无法遍历,无话获取到数据                var arr = eval(res);                //遍历返回的json数据加载到select标签;                $.each(arr, function(key, val) {                    $("#" + selectid).append(                            " <option id='" + val.tb_AreaId + "'>"                                    + val.areaName + "</option>");                });            }        });    };</script>

Servlet查询数据库的代码：

1.返回json数据

/**     * 收货地址=>显示城市下拉框     */    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        request.setCharacterEncoding("utf-8");        response.setContentType("text/html;charset=UTF-8");        //获取省级或市级的pid        int i = Integer.valueOf(request.getParameter("pid"));        //查询数据库数据（我这里是使用是DbUtils获取数据数据，这里可以自身使用的框架来查询数据）        List<tb_Area> list = dao.getbyAreaid(i);        //返回json数据:这里返回的一个JavaBBean的List集合，所以要使用JSONArray.fromObject(list)来转换json数据        response.getWriter().PRint(JSONArray.fromObject(list));    }

2.javabean代码

public class tb_Area {    private Integer tb_AreaId;    private String areaName;    public Integer getTb_AreaId() {        return tb_AreaId;    }    public void setTb_AreaId(Integer tb_AreaId) {        this.tb_AreaId = tb_AreaId;    }    public String getAreaName() {        return areaName;    }    public tb_Area() {    }    @Override    public String toString() {        return "tb_Area [tb_AreaId=" + tb_AreaId + ", areaName=" + areaName                + ", areaPid=" + areaPid + "]";    }    public void setAreaName(String areaName) {        this.areaName = areaName;    }    public Integer getAreaPid() {        return areaPid;    }    public void setAreaPid(Integer areaPid) {        this.areaPid = areaPid;    }    private Integer areaPid;}

数据库

http://pan.baidu.com/s/1gdw1Osj点击链接下载，这里是txt文件，导入数据库是用的是逗号分隔符，注意数据库子字段的命名即如图

运行下成功页面

好了 ，搞定了，要是有什么问题欢迎评论！！！