在博客園學習了很多實用的東西，現在該慢慢開始自己寫寫博客文章，由于本人水平有限，剛走出校園的小菜鳥，另外，文章在表述和代碼方面如有不妥之處，歡迎批評指正。留下你

的腳印，歡迎評論！

有什么問題，可以互相探討，希望對各位有所幫助。開始講東西吧

一個現實城市下拉框的界面

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文件，導入數據庫是用的是逗號分隔符，注意數據庫子字段的命名即如圖

運行下成功頁面

好了 ，搞定了，要是有什么問題歡迎評論?。?！