asp.net2.0结合Ajax实现DropDownList无刷新三联动下拉框

 这两天要使用到无刷新下拉功能，研究了一下Ajax，整理了一份使用asp.net2.0（vb）结合Ajax实现DropDownList无刷新三联动下拉框，共享出来，希望大家能用上

html代码

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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>
    <title>web3.cn——Ajax实现无刷新三联动下拉框</title>
    <style type="text/css">
        body {COLOR: #333;
        FONT-SIZE: 9pt;
        LINE-HEIGHT:150%;
        FONT-FAMILY: 'Lucida Grande',arial,verdana,sans-serif; }
    </style>
            <script language="javascript">
            //城市------------------------------
            function cityResult()
            {
                var city=document.getElementById("DropDownList1");
                AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
            }

            function get_city_Result_CallBack(response)
            {
                if (response.value != null)
                {
                    //debugger;
                    document.all("DropDownList2").length=0;　　　　
　　　　            var ds = response.value;
                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    {
                        for(var i=0; i<ds.Tables[0].Rows.length; i++)
　　　　                {
　　　　                    var name=ds.Tables[0].Rows[i].city;
　　　　　　                var id=ds.Tables[0].Rows[i].cityID;
　　　　　　                document.all("DropDownList2").options.add(new Option(name,id));
　　　　                }
                    }
                }
                return
            }
            //市区----------------------------------------
            function areaResult()
            {
                var area=document.getElementById("DropDownList2");
                AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
            }
            function get_area_Result_CallBack(response)
            {
                if (response.value != null)
                {
                    document.all("DropDownList3").length=0;　　　　
　　　　            var ds = response.value;
                    if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    {
                        for(var i=0; i<ds.Tables[0].Rows.length; i++)
　　　　                {
　　　　　　                var name=ds.Tables[0].Rows[i].area;
　　　　　　                var id=ds.Tables[0].Rows[i].areaID;
　　　　　　                document.all("DropDownList3").options.add(new Option(name,id));
　　　　                }
                    }
                }
                return
            }
            function getData()
            {
                var province=document.getElementById("DropDownList1");
                var pindex = province.selectedIndex;
                var pValue = province.options[pindex].value;
                var pText  = province.options[pindex].text;

                var city=document.getElementById("DropDownList2");
                var cindex = city.selectedIndex;
                var cValue = city.options[cindex].value;
                var cText  = city.options[cindex].text;

                var area=document.getElementById("DropDownList3");
                var aindex = area.selectedIndex;
                var aValue = area.options[aindex].value;
                var aText  = area.options[aindex].text;

                var txt=document.getElementById("TextBox1");

                document.getElementById("<%=TextBox1.ClientID%>")
                .innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
            }
            </script>
</head>
<body>
    <form id="form1" runat="server">
    <table cellspacing="0" border="1" style="width:300px;border-collapse:collapse;background:#ececec;">
        <tr>
            <td>省市</td>
            <td><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></td>
        </tr>
        <tr>
            <td>城市</td>
            <td><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></td>
        </tr>
        <tr>
            <td>市区</td>
            <td><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></td>
        </tr>
    </table>
    <br />
    <asp:TextBox id="TextBox1" runat="server" Width="424px"></asp:TextBox>
    <input type="button" value="获取资料" onclick="getData();" />
    </form>
</body>
</html>

VB代码

Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Ajax.Utility.RegisterTypeForAjax(GetType(AjaxMethod))
        If Not Page.IsPostBack Then
            Me.DropDownList1.DataSource = AjaxMethod.GetPovinceList()
            Me.DropDownList1.DataTextField = "province"
            Me.DropDownList1.DataValueField = "provinceID"
            Me.DropDownList1.DataBind()

            Me.DropDownList1.Attributes.Add("onclick", "cityResult();")
            Me.DropDownList2.Attributes.Add("onclick", "areaResult();")
        End If
    End Sub
End Class

AjaxMethod.vb 代码

Imports Microsoft.VisualBasic
Imports System
Imports System.Data
Imports System.Data.SqlClient

Public Class AjaxMethod

#Region "GetDataSet"
    Public Shared Function GetDataSet(ByVal sql As String) As DataSet
        Dim ConnectionString As String = System.Configuration.ConfigurationManager.AppSettings("ConnectionString")
        Dim sda As SqlDataAdapter = New SqlDataAdapter(sql, ConnectionString)
        Dim ds As DataSet = New DataSet()
        sda.Fill(ds)
        Return ds
    End Function
#End Region

#Region "GetPovinceList"
    Public Shared Function GetPovinceList() As DataSet
        Dim sql As String = "select * from province"
        Return GetDataSet(sql)
    End Function
#End Region

#Region "GetCityList"
    <Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
    Public Function GetCityList(ByVal povinceid As Integer) As DataSet
        Dim sql As String = "select * from city where father=" & povinceid
        Return GetDataSet(sql)
    End Function
#End Region
posted @ 2006-07-10 13:59  大牛博客  阅读(3749)  评论(10)    收藏  举报