ajax實現無刷新省市縣三級聯動

來源：懂視網責編：小OO 時間：2020-11-27 22:51:55

ajax實現無刷新省市縣三級聯動

本文實例為大家分享了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">；for (var i = 0；i <；result.d.length；'；'；i <。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了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">；for (var i = 0；i <；result.d.length；'；'；i <。

本文實例為大家分享了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;
 }

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

ajax實現無刷新省市縣三級聯動

推薦度：

點擊下載本文 文檔為doc格式

標簽：省市區 ajax jQuery

熱門焦點

ajax實現無刷新省市縣三級聯動

ajax實現無刷新省市縣三級聯動

ajax實現無刷新省市縣三級聯動

最新推薦

猜你喜歡

熱門推薦