龍騎少校

玩的就是技术。ko!!!

:: :: :: ::

dropdownlist三级联动效果

Posted on 2008-09-19 15:49 龍騎少校阅读(726) 评论(1) 收藏举报

前台html代码
<%@ Page language="c#" Codebehind="级联DropDownList无刷新.aspx.cs" AutoEventWireup="false" Inherits="bsTest2005_8_16.Samples.级联DropDownList无刷新" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>级联DropDownList无刷新</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">

function drop1()
{
while(document.all["DropDownList2"].options.length>1)
document.all["DropDownList2"].options.remove(1);

while(document.all["DropDownList3"].options.length>1)
document.all["DropDownList3"].options.remove(1);

if(document.all["DropDownList1"].selectedIndex>0)
{
var selected1 = new Array();
selected1 = allData[document.all["DropDownList1"].selectedIndex-1];
var i;
for(i=0;i<selected1.length;i++)
{
var oOption = document.createElement("OPTION");
document.all["DropDownList2"].options.add(oOption);

oOption.innerText = selected1[i][0][1];
oOption.value = selected1[i][0][0];
}
}
}

function drop2()
{
while(document.all["DropDownList3"].options.length>1)
document.all["DropDownList3"].options.remove(1);

if(document.all["DropDownList2"].selectedIndex>0)
{
var selected2 = new Array();
selected2 = allData[document.all["DropDownList1"].selectedIndex-1][document.all["DropDownList2"].selectedIndex-1][1];
var i;
for(i=0;i<selected2.length;i++)
{
var oOption = document.createElement("OPTION");
document.all["DropDownList3"].options.add(oOption);

oOption.innerText = selected2[i][1];
oOption.value = selected2[i][0];
}
}
}

</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DropDownList id="DropDownList1" runat="server" DataTextField="field2" DataValueField="field1">
<asp:ListItem> - - - - </asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="DropDownList2" runat="server">
<asp:ListItem> - - - - </asp:ListItem>
</asp:DropDownList>
<asp:DropDownList id="DropDownList3" runat="server">
<asp:ListItem> - - - - </asp:ListItem>
</asp:DropDownList>&nbsp;
</form>
</body>
</HTML>

后台c#代码
protected System.Web.UI.WebControls.DropDownList DropDownList1;
protected System.Web.UI.WebControls.DropDownList DropDownList2;
protected System.Web.UI.WebControls.DropDownList DropDownList3;

private DataTable dt1 = null;
private DataTable dt2 = null;
private DataTable dt3 = null;

private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
if(!IsPostBack)
{
LoadData();

this.DropDownList1.DataSource = dt1;
this.DropDownList1.DataBind();

this.DropDownList1.Items.Insert(0,new ListItem(" - - - - ",""));
this.DropDownList1.Attributes.Add("onchange","drop1();");
this.DropDownList2.Attributes.Add("onchange","drop2();");
}
Response.Write(this.CreateJSArray());
}

private void LoadData()
{
dt1 = new DataTable();
dt1.Columns.Add("field1");
dt1.Columns.Add("field2");

dt1.Rows.Add(new object[]{"gd","广东"});
dt1.Rows.Add(new object[]{"gx","广西"});
dt1.Rows.Add(new object[]{"fx","福建"});

dt2 = new DataTable();
dt2.Columns.Add("field1");
dt2.Columns.Add("field2");
dt2.Columns.Add("shengfen");

dt2.Rows.Add(new object[]{"sz","深圳","gd"});
dt2.Rows.Add(new object[]{"dg","东莞","gd"});
dt2.Rows.Add(new object[]{"zs","中山","gd"});
dt2.Rows.Add(new object[]{"zh","珠海","gd"});
dt2.Rows.Add(new object[]{"km","昆明","gx"});
dt2.Rows.Add(new object[]{"gl","桂林","gx"});
dt2.Rows.Add(new object[]{"fz","福州","fx"});
dt2.Rows.Add(new object[]{"st","汕头","fx"});

dt3 = new DataTable();
dt3.Columns.Add("chengshi");
dt3.Columns.Add("name");
dt3.Columns.Add("code");


dt3.Rows.Add(new object[]{"sz","深圳-wefawe","gd1"});
dt3.Rows.Add(new object[]{"dg","东莞-awef","gd2"});
dt3.Rows.Add(new object[]{"zs","中山-ewga","gd3"});
dt3.Rows.Add(new object[]{"zh","珠海-wega","gd4"});
dt3.Rows.Add(new object[]{"km","昆明-gawef","gx1"});
dt3.Rows.Add(new object[]{"gl","桂林-gaw3","gx2"});
dt3.Rows.Add(new object[]{"fz","福州-awg3","fx1"});
dt3.Rows.Add(new object[]{"st","汕头-dfaewf","fx2"});

dt3.Rows.Add(new object[]{"sz","深圳-IOEPRG","gd5"});
dt3.Rows.Add(new object[]{"dg","东莞-J5AQ5","gd6"});
dt3.Rows.Add(new object[]{"zs","中山-VAWER","gd7"});
dt3.Rows.Add(new object[]{"zh","珠海-BAER","gd8"});
dt3.Rows.Add(new object[]{"km","昆明-BAW3","gx5"});
dt3.Rows.Add(new object[]{"gl","桂林-BA4T","gx6"});
dt3.Rows.Add(new object[]{"fz","福州-FGAWH","fx5"});
dt3.Rows.Add(new object[]{"st","汕头-A3YA3","fx6"});
}


private string CreateJSArray()
{
if(ViewState["JSArray"]!=null)
{
return ViewState["JSArray"].ToString();
}
else
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<script language='javascript'>");
sb.Append("var allData = new Array("+dt1.Rows.Count+");");
for(int i=0;i<dt1.Rows.Count;i++)
{
string shengfen = dt1.Rows[i][0].ToString();
DataRow[] rows2 = dt2.Select("[shengfen]='"+shengfen+"'");
sb.Append("allData["+i.ToString()+"] = new Array("+rows2.Length+");");
for(int j=0;j<rows2.Length;j++)
{
string chengshi = rows2[j][0].ToString();
DataRow[] rows3 = dt3.Select("[chengshi]='"+chengshi+"'");
sb.Append("allData["+i.ToString()+"]["+j.ToString()+"] = new Array(2);");
sb.Append("allData["+i.ToString()+"]["+j.ToString()+"][0] = new Array(2);");
sb.Append("allData["+i.ToString()+"]["+j.ToString()+"][0][0] = '"+rows2[j][0].ToString()+"';");
sb.Append("allData["+i.ToString()+"]["+j.ToString()+"][0][1] = '"+rows2[j][1].ToString()+"';");
sb.Append("allData["+i.ToString()+"]["+j.ToString()+"][1] = new Array("+rows3.Length+");");
for(int k=0;k<rows3.Length;k++)
{
sb.Append("allData["+i.ToString()+"]["+j.ToString()+"][1]["+k.ToString()+"] = new Array(2);");
sb.Append("allData["+i.ToString()+"]["+j.ToString()+"][1]["+k.ToString()+"][0] = '"+rows3[k][2].ToString()+"';");
sb.Append("allData["+i.ToString()+"]["+j.ToString()+"][1]["+k.ToString()+"][1] = '"+rows3[k][1].ToString()+"';");
}
}
}

sb.Append("</script>");
ViewState["JSArray"] = sb.ToString();
return sb.ToString();
}
}

刷新页面返回顶部

龍騎少校

公告

dropdownlist三级联动效果