ajax實(shí)現(xiàn)無刷新省市縣三級(jí)聯(lián)動(dòng)
本文實(shí)例為大家分享了ajax實(shí)現(xiàn)無刷新省市縣三級(jí)聯(lián)動(dòng)的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
實(shí)現(xiàn)代碼:
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> 確認(rèn)密碼 </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>--請(qǐng)選擇--</option> </select> 省 <select id="secity"> <option>--請(qǐng)選擇--</option> </select>市 <select id="searea"> <option>--請(qǐng)選擇--</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 省市縣三級(jí)聯(lián)動(dòng) { /// <summary> /// WebService1 的摘要說明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù),請(qǐng)取消對(duì)下行的注釋。 [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; }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
- AJAX省市區(qū)三級(jí)聯(lián)動(dòng)下拉菜單(java版)
- ajax三級(jí)聯(lián)動(dòng)下拉菜單效果
- jQuery ajax實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)
- ajax三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)方法
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果簡(jiǎn)單示例
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(封裝和不封裝兩種方式)
- ajax實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的基本方法
- AJAX和WebService實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)具體代碼
- ajax實(shí)現(xiàn)城市三級(jí)聯(lián)動(dòng)
相關(guān)文章
ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁完整代碼
這篇文章主要為大家詳細(xì)介紹了ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁完整代碼,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-10-10創(chuàng)建ajax對(duì)象并兼容多個(gè)瀏覽器
這篇文章主要介紹了如何創(chuàng)建ajax對(duì)象并兼容多個(gè)瀏覽器,需要的朋友可以參考下2014-06-06基于ajax html實(shí)現(xiàn)文件上傳技巧總結(jié)
這篇文章主要為大家詳細(xì)總結(jié)了基于ajax html實(shí)現(xiàn)文件上傳技巧,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09ajax實(shí)現(xiàn)上傳圖片保存到后臺(tái)并讀取的實(shí)例
下面小編就為大家分享一篇ajax實(shí)現(xiàn)上傳圖片保存到后臺(tái)并讀取的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01AJAX+Servlet實(shí)現(xiàn)的數(shù)據(jù)處理顯示功能示例
這篇文章主要介紹了AJAX+Servlet實(shí)現(xiàn)的數(shù)據(jù)處理顯示功能,結(jié)合實(shí)例形式分析了前臺(tái)ajax與后臺(tái)Servlet生成隨機(jī)數(shù)顯示的相關(guān)交互操作技巧,需要的朋友可以參考下2018-06-06AJAX實(shí)現(xiàn)跨域的三種方法(代理,JSONP,XHR2)
這篇文章主要介紹了AJAX實(shí)現(xiàn)跨域的三種方法(代理,JSONP,XHR2)的相關(guān)資料,需要的朋友可以參考下2016-03-03ajax 入門基礎(chǔ)之 XMLHttpRequest對(duì)象總結(jié)
在ajax中有一個(gè)最為核心的概念就是 XMLHttpRequest 對(duì)象,這篇文章將有助于我們更加深入的理解 ajax 的知識(shí)2009-08-08