AJAX和WebService实现省市县三级联动具体代码

jofjoejojoj

jofjoejojoj

2016-02-19 09:40

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的AJAX和WebService实现省市县三级联动具体代码,过去的都会过去,迎接崭新的开始,释放更美好的自己。
-------------------------------------WebService1.asmx---------------------------------------
代码如下:

// 若要允许使用 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 ListModel.province GetProvince()
{
BLL.province bpro = new BLL.province();
ListModel.province list = bpro.GetListModel();
return list;
}
[WebMethod]
public ListModel.city GetCityByPro(string proid)
{
BLL.city bcity = new BLL.city();
ListModel.city list = bcity.GetListModel("father='" + proid + "'");
return list;
}
[WebMethod]
public ListModel.area GetAreaByCity(string cityid)
{
BLL.area barea = new BLL.area();
ListModel.area list = barea.GetListModel("father='" + cityid + "'");
return list;
}

----------------------------------HTMLPage1.htm----------------------------
代码如下:

html xmlns="http://www.w3.org/1999/xhtml"
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
select id="seprovince"
option--请选择--/option
/select

select id="secity"
option--请选择--/option
/select市
select id="searea"
option--请选择--/option
/select县
/td
/tr
/table
/body
/html


注:用到了三层架构,dal层写了一些方法
展开更多 50%)
分享

猜你喜欢

AJAX和WebService实现省市县三级联动具体代码

Web开发
AJAX和WebService实现省市县三级联动具体代码

jQuery AJAX 调用WebService实现代码

Web开发
jQuery AJAX 调用WebService实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

使用AJAX返回WebService里的集合具体实现

Web开发
使用AJAX返回WebService里的集合具体实现

AJAX和三层架构实现分页功能具体思路及代码

Web开发
AJAX和三层架构实现分页功能具体思路及代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Ajax实现无刷新三联动下拉框

Web开发
Ajax实现无刷新三联动下拉框

jquery ajax实现批量删除具体思路及代码

Web开发
jquery ajax实现批量删除具体思路及代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

AJAX和三层架构实现分页功能具体思路及代码

AJAX和三层架构实现分页功能具体思路及代码

C# 位运算符整理

C# 位运算符整理
下拉加载更多内容 ↓