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;
}
以上就是本文的全部內(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)效果簡單示例
- 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-09
ajax實(shí)現(xiàn)上傳圖片保存到后臺(tái)并讀取的實(shí)例
下面小編就為大家分享一篇ajax實(shí)現(xiàn)上傳圖片保存到后臺(tái)并讀取的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
AJAX+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-06
AJAX實(shí)現(xiàn)跨域的三種方法(代理,JSONP,XHR2)
這篇文章主要介紹了AJAX實(shí)現(xiàn)跨域的三種方法(代理,JSONP,XHR2)的相關(guān)資料,需要的朋友可以參考下2016-03-03
ajax 入門基礎(chǔ)之 XMLHttpRequest對(duì)象總結(jié)
在ajax中有一個(gè)最為核心的概念就是 XMLHttpRequest 對(duì)象,這篇文章將有助于我們更加深入的理解 ajax 的知識(shí)2009-08-08

