您的位置：首页 > 其它

Ajax三级联动菜单（转载）

2007-05-30 09:55 344 查看

页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropTest.aspx.cs" Inherits="AjexTest_DropTest" %>

<!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>Ajax实现无刷新三联动下拉框</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script language="javascript">
//城市------------------------------
function cityResult()
{
var city=document.getElementById("DropDownList1");
// alert(city.value);
AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);

}

function get_city_Result_CallBack(response)
{
// alert(response.value);
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));
　　　　 }
}
}

areaResult();
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 ms_positioning="GridLayout" onload="cityResult();" >
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"
cellPadding="1" width="300" border="1" bgColor="#ccff66">
<TR>
<TD>省市</TD>
<TD><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></TD>
</TR>
<TR>
<TD>城市</TD>
<TD><asp:dropdownlist id="DropDownList2" runat="server" Width="80px"></asp:dropdownlist></TD>
</TR>
<TR>
<TD>市区</TD>
<TD><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></TD>
</TR>
</TABLE>
<asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px" runat="server"
Width="424px"></asp:TextBox><INPUT style="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
type="button" value="test" onclick="getData();" id="Button1">

<asp:Button ID="Button2" runat="server" Text="Button" />
</form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class AjexTest_DropTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
if (!Page.IsPostBack)
{
this.DropDownList1.DataSource = AjaxMethod.GetProvinceList();
this.DropDownList1.DataTextField = "province";
this.DropDownList1.DataValueField = "provinceID";
this.DropDownList1.DataBind();

this.DropDownList1.Attributes.Add("onchange", "cityResult();");
this.DropDownList2.Attributes.Add("onchange", "areaResult();");

this.Button2.Attributes.Add("onclick", "alert('dd')");
}

}
}

类：

using System;
using System.Data;
using System.Data.SqlClient;

/**//// <summary>
/// Summary description for AjaxMethod.
/// </summary>
public class AjaxMethod
{
#region GetProvinceList
public static DataSet GetProvinceList()
{
string sql="select * from province";
return GetDataSet(sql);
}
#endregion

#region GetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataSet GetCityList(int provinceid)
{
string sql="select * from city where father = '"+provinceid + "'";
return GetDataSet(sql);
}
#endregion

#region GetAreaList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataSet GetAreaList(int cityid)
{
string sql="select * from area where father = '" + cityid + "'";
//string sql = "select * from area ";
return GetDataSet(sql);
}
#endregion

#region GetDataSet
public static DataSet GetDataSet(string sql)
{
string ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
System.Data.OleDb.OleDbDataAdapter oda =new System.Data.OleDb.OleDbDataAdapter(sql,ConnectionString);
DataSet ds=new DataSet();
oda.Fill(ds);
return ds;
}
#endregion
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航