省级联动(使用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文件，导入数据库是用的是逗号分隔符，注意数据库子字段的命名即如图

运行下成功页面

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