ajax實現無重新整理省市縣三級聯動

ajax實現無重新整理省市縣三級聯動_AJAX相關

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體為大家分享了ajax實現無重新整理省市縣三級聯動的具體代碼，供大家參考，具體內容如下

效果圖：

實現代碼：

1、html：

<html><head>  <title></title>    <style type="text/css">    select    {      width: 150px;    }  </style>  <script src="js/Jquery1.7.js" type="text/javascript"></script>  <script type="text/javascript">    $(function () {      $.ajax({        type: "post",        contentType: "application/json",        url: "WebService1.asmx/GetProvince",        data: "{}",        success: function (result) {          var stroption = '';          for (var i = 0; i < result.d.length; i++) {            stroption += '<option value=' + result.d[i].provinceID + '>';            stroption += result.d[i].provincename;            stroption += '</option>';          }          $('#seprovince').append(stroption);        }      })      $('#seprovince').change(function () {       $('#secity option:gt(0)').remove();        $('#searea option:gt(0)').remove();        $.ajax({          type: "post",          contentType: "application/json",          url: "WebService1.asmx/GetCItyByPro",          data: "{proid:'" + $(this).val() + "'}",          success: function (result) {            var strocity = '';            for (var i = 0; i < result.d.length; i++) {              strocity += '<option value=' + result.d[i].cityID + '>';              strocity += result.d[i].cityname;              strocity += '</option>';            }            $('#secity').append(strocity);          }        })      })      $('#secity').change(function () {        $('#searea option:gt(0)').remove();        $.ajax({          type: "post",          contentType: "application/json",          url: "WebService1.asmx/GetAreaByCity",          data: "{cityid:'" + $(this).val() + "'}",          success: function (result) {            var stroarea = '';            for (var i = 0; i < result.d.length; i++) {              stroarea += '<option value=' + result.d[i].areaID + '>';              stroarea += result.d[i].areaname;              stroarea += '</option>';            }            $('#searea').append(stroarea);          }        })      })    })  </script></head><body> <table>    <tr>      <td>        使用者名稱      </td>      <td>        <input id="Text1" type="text" />      </td>    </tr>    <tr>      <td>        密碼      </td>      <td>        <input id="Text2" type="text" />      </td>    </tr>    <tr>      <td>        確認密碼      </td>      <td>        <input id="Text3" type="text" />      </td>    </tr>    <tr>      <td>        郵箱      </td>      <td>        <input id="Text4" type="text" />      </td>    </tr>    <tr>      <td>        地址      </td>      <td>        <select id="seprovince">          <option>--請選擇--</option>        </select>        省        <select id="secity">          <option>--請選擇--</option>        </select>市        <select id="searea">          <option>--請選擇--</option>        </select>縣      </td>    </tr>  </table></body></html>

2、WebService1.asmx

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;namespace 省市縣三級聯動{  /// <summary>  /// WebService1 的摘要說明  /// </summary>  [WebService(Namespace = "http://tempuri.org/")]  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  [System.ComponentModel.ToolboxItem(false)]  // 若要允許使用 ASP.NET AJAX 從指令碼中調用此 Web 服務，請取消對下行的注釋。   [System.Web.Script.Services.ScriptService]  public class WebService1 : System.Web.Services.WebService  {    [WebMethod]    public string HelloWorld()    {      return "Hello World";    }    [WebMethod]    public List<Model.province> GetProvince()    {      BLL.province bpro = new BLL.province();      List<Model.province> list = bpro.GetListModel();      return list;    }    [WebMethod]    public List<Model.city> GetCItyByPro(string proid)    {      BLL.city bcity = new BLL.city();      List<Model.city> list = bcity.GetListModel("father='" + proid + "'");      return list;    }    [WebMethod]    public List<Model.area> GetAreaByCity(string cityid)    {      BLL.area barea = new BLL.area();      List<Model.area> list = barea.GetListModel("father='" + cityid + "'");      return list;    }  }}

在三層的Bll層中的city.cs和area.cs中分別添加以下屬性

//city.cs：  public List<Model.city> GetListModel(string strsql)    {      return dal.GetListModel(strsql);    }//area.cs：   public List<Model.area> GetListModel(string strsql)    {      return dal.GetListModel(strsql);    }

在三層的DAL層中的city.cs和area.cs中分別添加以下方法

//city.cs：public System.Collections.Generic.List<Model.city> GetListModel(string strsql)    {      System.Collections.Generic.List<Model.city> list = new System.Collections.Generic.List<Model.city>();      DataTable dt = GetList(strsql).Tables[0];      foreach (DataRow row in dt.Rows)      {        Model.city mcity = new Model.city();        mcity.id = Convert.ToInt32(row["id"]);        mcity.cityID = row["cityID"].ToString();        mcity.cityname = row["cityname"].ToString();        list.Add(mcity);      }      return list;    }//area.cs：  public System.Collections.Generic.List<Model.area> GetListModel(string strsql)    {      DataTable dt = GetList(strsql).Tables[0];      System.Collections.Generic.List<Model.area> list = new System.Collections.Generic.List<Model.area>();      foreach (DataRow row in dt.Rows)      {        Model.area marea = new Model.area()        {          id = Convert.ToInt32(row["id"]),          areaID = row["areaID"].ToString(),          areaname = row["areaname"].ToString()        };        list.Add(marea);      }      return list;    }

以上就是本文的全部內容，希望對大家的學習有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More