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

最新推荐文章于 2016-07-17 19:24:00 发布
LeoHaiTao
最新推荐文章于 2016-07-17 19:24:00 发布
阅读量3.6k
点赞数 2
分类专栏： ASP.NET 文章标签： asp.net jquery ajax webservice string function
本文链接：https://blog.csdn.net/haitaoDoit/article/details/7436104
版权
ASP.NET 专栏收录该内容
37 篇文章 0 订阅
订阅专栏
前台：

<%@ 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();
            }
        }
    }
}