您的位置:首页 > Web前端 > JQuery

jquery ajax实现省市县3级联动

2013-03-07 11:33 232 查看
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var ddlProvince = $("#ddlProvince");
var ddlCity = $("#ddlCity");
var ddlCounty = $("#ddlCounty");
LoadData(0, "", ddlProvince);
ddlCity.html('<option selected="selected" value="0">---请选择----</option>');
ddlCounty.html('<option selected="selected" value="0">---请选择----</option>');
ddlProvince.change(function () {
LoadData(1, ddlProvince.val(), ddlCity);
ddlCounty.html('<option selected="selected" value="0">---请选择----</option>');

});
ddlCity.change(function () {
LoadData(2, ddlCity.val(), ddlCounty);
});
});

function LoadData(level, code, ddl) {
ddl.html('<option selected="selected" value="0">---请选择----</option>');
$.getJSON('area.ashx',
{ level: level, code: code },
function (data) {
for (var i = 0; i < data.length; i++)
{
ddl.append($("<option></option>").val(data[i].AreaCode).html(data[i].AreaName));
}
});
}

</script>

</head>
<body>
<form id="form1" runat="server">

<div>

<asp:DropDownList ID="ddlCountry" runat="Server">
<asp:ListItem Selected="True">中国</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlProvince" runat="server"  >
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCounty" runat="server">
</asp:DropDownList>

</div>
</form>
</body>
</html>


area.ashx
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;using Model;using Service;using DAO;namespace WebApplication1{ /// <summary> /// area 的摘要说明 /// </summary> public class area : IHttpHandler
{ public Service.AreaService service = new Service.AreaService(); public IList<Area> AreaList; IDictionary<string, object> conditions = new Dictionary<string, object>(); public void ProcessRequest(HttpContext context) { string code = context.Request["code"].ToString();
int level = Convert.ToInt32(context.Request["level"]); StringBuilder sb = new StringBuilder(string.Empty); conditions.Add("AreaCode", code); switch (level) { case 0: AreaList = service.GetProvinceService(); break; case 1: AreaList = service.GetCityByProvinceService(conditions);
break; case 2: AreaList = service.GetCountyByCityNameService(conditions); break; default: break; } string result = Newtonsoft.Json.JsonConvert.SerializeObject(AreaList); context.Response.ContentType = "text/plain"; context.Response.Write(result); } public
bool IsReusable { get { return false; } } }}


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: