無刷新三級聯動

  <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "WebService1.asmx/GetListProvince",
                Data: "{}",
                success: function (result) {
                    var strDrop = '';
                    for (var i = 0; i < result.d.length; i++) {
                        strDrop += "<option value='" + result.d[i].provinceID + "' >" + result.d[i].provinceName + "</option>";
                    }
                    $('#Province').append(strDrop);
                }
            })

            $('#Province').change(function () {
                $('#City option:gt(0)').remove();
                $('#Area option:gt(0)').remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/GetListCity",
                    data: "{Id:'" + $(this).val() + "'}",
                    success: function (result) {
                        var strCity = '';
                        for (var i = 0; i < result.d.length; i++) {
                            strCity += "<option value='" + result.d[i].cityID + "' >" + result.d[i].cityName + "</option>";
                        }
                        $('#City').append(strCity);
                    }
                })
            })

            $('#City').change(function () {
                $('#Area option:gt(0)').remove();
                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "WebService1.asmx/GetListArea",
                    data: "{Id:'" + $(this).val() + "'}",
                    success: function (result) {
                        var strArea = '';
                        for (var i = 0; i < result.d.length; i++) {
                            strArea += "<option value='" + result.d[i].areaID + "' >" + result.d[i].areaName + "</option>";
                        }
                        $('#Area').append(strArea);
                    }
                })
            })

        })
    </script>

<select id="Province">

       <option>--請選擇--</option>
    </select>省
    <select id="City">
       <option>--請選擇--</option>
    </select>市
    <select id="Area">
      <option>--請選擇--</option>

    </select>縣

WebService

      [WebMethod]
        public List<Model.province> GetListProvince()
        {
            BLL.province bll_Province = new BLL.province();
            List<Model.province> list = bll_Province.GetListModel();
            return list;
        }

        [WebMethod]
        public List<Model.city> GetListCity(string Id)
        {
            BLL.city bll_City = new BLL.city();
            List<Model.city> list = bll_City.GetListCity("father='"+Id+"'");
            return list;
        }

        [WebMethod]
        public List<Model.area> GetListArea(string Id)
        {
            BLL.area bll_area = new BLL.area();
            List<Model.area> list = bll_area.GetlistArea("father='" + Id + "'");
            return list;
        }

三層的方法同上一篇文章的三層相同