net2.0结合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 _DefaultClass _Default
Inherits System.Web.UI.Page

Protected Sub Page_Load()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 AjaxMethodClass AjaxMethod

GetDataSet#Region "GetDataSet"
Public Shared Function GetDataSet()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

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

GetCityList#Region "GetCityList"
<Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
Public Function GetCityList()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

GetAreaList#Region "GetAreaList"
<Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
Public Function GetAreaList()Function GetAreaList(ByVal cityid As Integer) As DataSet
Dim sql As String = "select * from area where father=" & cityid
Return GetDataSet(sql)
End Function
#End Region

End Class

在web.config文件加增加

posted on 2007-02-14 10:01 mbskys 阅读(115) 评论(0) 收藏举报