asp.net 使用jquery 和ajax 实现三级联动
来源：互联网 发布：如何正确使用网络 编辑：程序博客网 时间：2024/06/05 02:44
前台：<%@ Page Language="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"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> #Select1 { height: 21px; width: 95px; } #Select2 { height: 21px; width: 90px; } #Select3 { height: 21px; width: 103px; } </style> <script src="Jquery1.7.js" type="text/javascript"></script> <script type="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("<option value=" + 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("<option value=" + 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("<option value=" + array1[0] + ">" + array1[1] + "</option>"); } } }) }) }) </script></head><body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> <asp:DropDownList ID="DropDownList2" runat="server"> </asp:DropDownList> <asp:DropDownList ID="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(); } } }}
