asp.net 使用jquery 和ajax 实现三级联动

来源：互联网发布：淘宝服装代销网站编辑：程序博客网时间：2024/06/06 01:56

前台：
<%@ PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
#Select1
{
height: 21px;
width: 95px;
}
#Select2
{
height: 21px;
width: 90px;
}
#Select3
{
height: 21px;
width: 103px;
}
</style>
<scriptsrc="Jquery1.7.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function () {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService.asmx/province",
data: "{}",
success: function (result) {
var array =result.d.split(",");
for (var i =0; i<array.length - 1; i++) {
var array1 =array[i].split("|");
$("#DropDownList1").append("<optionvalue=" + array1[0] + ">" + array1[1] + "</option>");
}
}
})
$("#DropDownList1").change(function () {
document.getElementById('DropDownList2').length =0;
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService.asmx/city",
data: "{drop1:" + $(this).val() + "}",
success: function (result) {
var array =result.d.split(",");
for (var i =0; i<array.length - 1; i++) {
var array1 =array[i].split("|");
$("#DropDownList2").append("<optionvalue=" + array1[0] + ">" + array1[1] + "</option>");
}
}
})
})
$("#DropDownList2").change(function () {
document.getElementById('DropDownList3').length =0;
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService.asmx/area",
data: "{drop2:" + $(this).val() + "}",
success: function (result) {
var array =result.d.split(",");
for (var i =0; i<array.length - 1; i++) {
var array1 =array[i].split("|");
$("#DropDownList3").append("<optionvalue=" + array1[0] + ">" + array1[1] + "</option>");
}
}
})
})
})
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:DropDownListID="DropDownList1"runat="server">
</asp:DropDownList>
<asp:DropDownListID="DropDownList2"runat="server">
</asp:DropDownList>
<asp:DropDownListID="DropDownList3"runat="server">
</asp:DropDownList>
</div>
</form>
</body>
</html>
webservice：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
/// <summary>
///WebService 的摘要说明
/// </summary>
[WebService(Namespace ="http://tempuri.org/")]
[WebServiceBinding(ConformsTo =WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
string sqlstr=ConfigurationManager.ConnectionStrings["sqlstr"].ConnectionString;
public WebService () {
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
return "Hello World";
}
[WebMethod]
public string province()
{
using (SqlConnection sqlcnn =new SqlConnection(sqlstr))
{
using (SqlCommand sqlcmm=sqlcnn.CreateCommand())
{
sqlcmm.CommandText ="select * from province";
DataTable dt =new DataTable();
SqlDataAdapter adapt =new SqlDataAdapter(sqlcmm);
adapt.Fill(dt);
StringBuilder sb1 =new StringBuilder();
for (int i =0; i<dt.Rows.Count; i++)
{
string proid =dt.Rows[i]["provinceID"].ToString();
string proname =dt.Rows[i]["province"].ToString();
sb1.Append(proid);
sb1.Append("|");
sb1.Append(proname);
sb1.Append(",");
}
return sb1.ToString();
}
}
}
[WebMethod]
public string city(int drop1)
{
using (SqlConnection sqlcnn=new SqlConnection(sqlstr))
{
using (SqlCommand sqlcmm=sqlcnn.CreateCommand())
{
sqlcmm.CommandText ="select * from city where father=@father";
sqlcmm.Parameters.AddWithValue("@father", drop1);
DataTable dt =new DataTable();
SqlDataAdapter adapt =new SqlDataAdapter(sqlcmm);
adapt.Fill(dt);
StringBuilder sb2 =new StringBuilder();
for (int i =0; i<dt.Rows.Count; i++)
{
string proid =dt.Rows[i]["cityID"].ToString();
string proname =dt.Rows[i]["city"].ToString();
sb2.Append(proid);
sb2.Append("|");
sb2.Append(proname);
sb2.Append(",");
}
return sb2.ToString();
}
}
}
[WebMethod]
public string area(int drop2)
{
using (SqlConnection sqlcnn =new SqlConnection(sqlstr))
{
using (SqlCommand sqlcmm =sqlcnn.CreateCommand())
{
sqlcmm.CommandText ="select * from area where father=@father";
sqlcmm.Parameters.AddWithValue("@father", drop2);
DataTable dt =new DataTable();
SqlDataAdapter adapt =new SqlDataAdapter(sqlcmm);
adapt.Fill(dt);
StringBuilder sb3 =new StringBuilder();
for (int i =0; i<dt.Rows.Count; i++)
{
string proid =dt.Rows[i]["areaID"].ToString();
string proname =dt.Rows[i]["area"].ToString();
sb3.Append(proid);
sb3.Append("|");
sb3.Append(proname);
sb3.Append(",");
}
return sb3.ToString();
}
}
}
}