0
点赞
收藏
分享

微信扫一扫

存储过程+Jquery+WebService实现三级联动:

首先看一下数据库的设计:

存储过程+Jquery+WebService实现三级联动:_json

2.存储过程的写法:

ALTER proc [dbo].[pro_GetCity](
@city_pid int
)
as
begin
--SELECT * FROM tbl_city WHERE city_pid IN (
select * from tbl_city where city_pid=@city_pid
end

--exec [dbo].[pro_GetCity] 0

 看一下执行效果:

存储过程+Jquery+WebService实现三级联动:_sql_02

服务层的代码:

// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。 
[System.Web.Script.Services.ScriptService]

[WebMethod]
public string CityList(string citycode)
{
return JsonHelper.GetJson<List<tbl_city>>(new SelectComboxBLL().CityList(citycode));
}

 数据层的代码:

public List<tbl_city> CityList(string citycode)
{
SqlParameter[] pars = { new SqlParameter("@city_pid", citycode) };
return new SQLBase().TableToEntity<tbl_city>(DBhelp.SqlHelper.GetTable("pro_GetCity", System.Data.CommandType.StoredProcedure, pars));
}

 业务层:

public List<tbl_city> CityList(string citycode)
{
return new SelectCombox().CityList(citycode);
}

 最核心的jquery调用WebService:

<script type="text/javascript">

$(function () {
//省市县的绑定
$.ajax({
type: "post",
contentType: "application/json",
url: "/WebService/SelectComboxService.asmx/CityList",
data: "{citycode:'0'}",
success: function (result) {
var arr = null;
if (typeof result.d == 'string')
arr = JSON.parse(result.d);
else
arr = result.d;
var stroption = '';
for (var i = 0; i < arr.length; i++) {
stroption += '<option value=' + arr[i]._city_id + '>';
stroption += arr[i]._name;
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: "/WebService/SelectComboxService.asmx/CityList",
data: "{citycode:'" + $(this).val() + "'}",
success: function (result) {

var arr = null;
if (typeof result.d == 'string')
arr = JSON.parse(result.d);
else
arr = result.d;
var strocity = '';
for (var i = 0; i < arr.length; i++) {
strocity += '<option value=' + arr[i]._city_id + '>';
strocity += arr[i]._name;
strocity += '</option>';
}
$('#secity').append(strocity);
}
})
})


$('#secity').change(function () {
$('#searea option:gt(0)').remove();
$.ajax({
type: "post",
contentType: "application/json",
url: "/WebService/SelectComboxService.asmx/CityList",
data: "{citycode:'" + $(this).val() + "'}",
success: function (result) {
var arr = null;
if (typeof result.d == 'string')
arr = JSON.parse(result.d);
else
arr = result.d;
var stroarea = '';
for (var i = 0; i < arr.length; i++) {
stroarea += '<option value=' + arr[i]._city_id + '>';
stroarea += arr[i]._name;
stroarea += '</option>';
}
$('#searea').append(stroarea);
}
})
})
});

 前端页面:

<tr>
<td>** 详细地址:</td>
<td style="width:60%">
<select id="seprovince"><option>--请选择--</option></select>省
<select id="secity"><option>--请选择--</option></select>市
<select id="searea"><option>--请选择--</option></select>区(县)
</td>
</tr>

 最后来张效果图:

存储过程+Jquery+WebService实现三级联动:_sql_03

当然里面用了一些公用类库,有需要的私聊!



举报

相关推荐

0 条评论