[转]三级联动.
之前写了一篇2级联动的,将其修改,就可以得到3级联动菜单。
BigClass
表结构:
测试数据:
SmallClass1
表结构:
测试数据:
SmallClass2
表结构:
测试数据:
aspx页面:
aspx代码:
cs代码:
BigClass
表结构:
测试数据:
SmallClass1
表结构:
测试数据:
SmallClass2
表结构:
测试数据:
aspx页面:
aspx代码:
<%@ Page language="c#" Codebehind="liandong_three.aspx.cs" AutoEventWireup="false" Inherits="AspNetTest.Common.liandong_three" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>liandong_three</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 change1()
{
var obj = document.Form1.DropDownList1;
if(obj.selectedIndex == 0)
{
document.Form1.DropDownList2.length =1;
return;
}
var bigClassId = obj.options[obj.selectedIndex].value;
var obj = document.Form1.DropDownList2;
obj.length = 0;
obj.options[0] = new Option("=选择小类1=", "");
var len = 0;
for(var i=0; i<arrSmallClass1.length; i++)
{
if(arrSmallClass1[i][2] == bigClassId)
{
obj.options[++len] = new Option(arrSmallClass1[i][1], arrSmallClass1[i][0]);
}
}
}
function change2()
{
var obj = document.Form1.DropDownList2;
if(obj.selectedIndex == 0)
{
document.Form1.DropDownList3.length =1;
return;
}
var smallClassId1 = obj.options[obj.selectedIndex].value;
var obj = document.Form1.DropDownList3;
obj.length = 0;
obj.options[0] = new Option("=选择小类2=", "");
var len = 0;
for(var i=0; i<arrSmallClass2.length; i++)
{
if(arrSmallClass2[i][2] == smallClassId1)
{
obj.options[++len] = new Option(arrSmallClass2[i][1], arrSmallClass2[i][0]);
}
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="宋体">
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 100; LEFT: 40px; POSITION: absolute; TOP: 40px"
runat="server"></asp:DropDownList>
<asp:DropDownList id="DropDownList3" style="Z-INDEX: 103; LEFT: 216px; POSITION: absolute; TOP: 40px"
runat="server"></asp:DropDownList>
<asp:DropDownList id="DropDownList2" style="Z-INDEX: 102; LEFT: 128px; POSITION: absolute; TOP: 40px"
runat="server"></asp:DropDownList></FONT></form>
</body>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>liandong_three</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 change1()
{
var obj = document.Form1.DropDownList1;
if(obj.selectedIndex == 0)
{
document.Form1.DropDownList2.length =1;
return;
}
var bigClassId = obj.options[obj.selectedIndex].value;
var obj = document.Form1.DropDownList2;
obj.length = 0;
obj.options[0] = new Option("=选择小类1=", "");
var len = 0;
for(var i=0; i<arrSmallClass1.length; i++)
{
if(arrSmallClass1[i][2] == bigClassId)
{
obj.options[++len] = new Option(arrSmallClass1[i][1], arrSmallClass1[i][0]);
}
}
}
function change2()
{
var obj = document.Form1.DropDownList2;
if(obj.selectedIndex == 0)
{
document.Form1.DropDownList3.length =1;
return;
}
var smallClassId1 = obj.options[obj.selectedIndex].value;
var obj = document.Form1.DropDownList3;
obj.length = 0;
obj.options[0] = new Option("=选择小类2=", "");
var len = 0;
for(var i=0; i<arrSmallClass2.length; i++)
{
if(arrSmallClass2[i][2] == smallClassId1)
{
obj.options[++len] = new Option(arrSmallClass2[i][1], arrSmallClass2[i][0]);
}
}
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="宋体">
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 100; LEFT: 40px; POSITION: absolute; TOP: 40px"
runat="server"></asp:DropDownList>
<asp:DropDownList id="DropDownList3" style="Z-INDEX: 103; LEFT: 216px; POSITION: absolute; TOP: 40px"
runat="server"></asp:DropDownList>
<asp:DropDownList id="DropDownList2" style="Z-INDEX: 102; LEFT: 128px; POSITION: absolute; TOP: 40px"
runat="server"></asp:DropDownList></FONT></form>
</body>
</HTML>
cs代码:
1using System;
2using System.Text;
3using System.Collections;
4using System.ComponentModel;
5using System.Data;
6using System.Data.SqlClient;
7using System.Drawing;
8using System.Web;
9using System.Web.SessionState;
10using System.Web.UI;
11using System.Web.UI.WebControls;
12using System.Web.UI.HtmlControls;
13
14namespace AspNetTest.Common
15{
16 /// <summary>
17 /// liandong_three 的摘要说明。
18 /// </summary>
19 public class liandong_three : System.Web.UI.Page
20 {
21 protected System.Web.UI.WebControls.DropDownList DropDownList1;
22 protected System.Web.UI.WebControls.DropDownList DropDownList2;
23 protected System.Web.UI.WebControls.DropDownList DropDownList3;
24
25 private void Page_Load(object sender, System.EventArgs e)
26 {
27 if(!IsPostBack)
28 {
29 BindDDLCreateJsdArray();
30 }
31 // 在此处放置用户代码以初始化页面
32 }
33 private void BindDDLCreateJsdArray()
34 {
35 string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
36 SqlConnection conn = new SqlConnection(ConnectionString);
37 string sql = "select b.d_name as bname,b.d_id as bid,s.d_id as sid,s.d_name as sname,ss.d_id as ssid,ss.d_name as ssname from SmallClass1 s,BigClass b,SmallClass2 ss where b.d_id=s.d_classid and s.d_id=ss.d_classid";
38 SqlCommand cmd = new SqlCommand(sql, conn);
39 conn.Open();
40 SqlDataReader dr = cmd.ExecuteReader();
41 StringBuilder sb = new StringBuilder();
42 sb.Append("<script language=javascript>\n");
43 //定义JS数组
44 sb.Append("var arrSmallClass2 = new Array();\n");
45 sb.Append("var arrSmallClass1 = new Array();\n");
46 ListItem lt = new ListItem("=选择大类=", "");
47 DropDownList1.Items.Add(lt);
48 lt = new ListItem("=选择小类1=", "");
49 DropDownList2.Items.Add(lt);
50 lt = new ListItem("=选择小类2=", "");
51 DropDownList3.Items.Add(lt);
52 int i = 0;
53 int j = 0;
54 int PreBigClassId = 0;
55 int PreSmallClass1Id = 0;
56 while(dr.Read())
57 {
58 string BigClassName = dr["bname"].ToString();
59 int BigClassId = Convert.ToInt32(dr["bid"].ToString());
60 string SmallClass1Name = dr["sname"].ToString();
61 int SmallClass1ID = Convert.ToInt32(dr["sid"].ToString());
62 string SmallClass2Name = dr["ssname"].ToString();
63 int SmallClass2ID = Convert.ToInt32(dr["ssid"].ToString());
64 lt = new ListItem(BigClassName, BigClassId.ToString());
65 //防止创建重复值
66 if(BigClassId != PreBigClassId)
67 {
68 DropDownList1.Items.Add(lt);
69 PreBigClassId = BigClassId;
70 }
71 lt = new ListItem(SmallClass1Name, SmallClass1ID.ToString());
72 if(SmallClass1ID != PreSmallClass1Id)
73 {
74 DropDownList2.Items.Add(lt);
75 PreSmallClass1Id = SmallClass1ID;
76 /*
77 给JS数组赋值。
78 注意:JS中不能直接创建二维数组,要创建可以这样
79 var arrTest = new Array();
80 arrTest[0] = new Array();
81 arrTest[0][0] = 1
82 */
83 sb.Append("arrSmallClass1["+ j +"] = new Array();\n");
84 sb.Append("arrSmallClass1["+ j +"][0] = " + SmallClass1ID.ToString() + ";\n");
85 sb.Append("arrSmallClass1["+ j +"][1] = \"" + SmallClass1Name + "\";\n");
86 sb.Append("arrSmallClass1["+ j +"][2] = " + BigClassId + ";\n");
87 j++;
88 }
89 sb.Append("arrSmallClass2["+ i +"] = new Array();\n");
90 sb.Append("arrSmallClass2["+ i +"][0] = " + SmallClass2ID.ToString() + ";\n");
91 sb.Append("arrSmallClass2["+ i +"][1] = \"" + SmallClass2Name + "\";\n");
92 sb.Append("arrSmallClass2["+ i +"][2] = " + SmallClass1ID + ";\n");
93 i++;
94 }
95 sb.Append("</script>");
96 //将JS字符串输出到客户端
97 Page.Response.Write(sb.ToString());
98 //大类change事件
99 DropDownList1.Attributes.Add("onchange", "change1();change2()");
100 //小类1change事件
101 DropDownList2.Attributes.Add("onchange", "change2();");
102 }
103 Web 窗体设计器生成的代码
123 }
124}
125
2using System.Text;
3using System.Collections;
4using System.ComponentModel;
5using System.Data;
6using System.Data.SqlClient;
7using System.Drawing;
8using System.Web;
9using System.Web.SessionState;
10using System.Web.UI;
11using System.Web.UI.WebControls;
12using System.Web.UI.HtmlControls;
13
14namespace AspNetTest.Common
15{
16 /// <summary>
17 /// liandong_three 的摘要说明。
18 /// </summary>
19 public class liandong_three : System.Web.UI.Page
20 {
21 protected System.Web.UI.WebControls.DropDownList DropDownList1;
22 protected System.Web.UI.WebControls.DropDownList DropDownList2;
23 protected System.Web.UI.WebControls.DropDownList DropDownList3;
24
25 private void Page_Load(object sender, System.EventArgs e)
26 {
27 if(!IsPostBack)
28 {
29 BindDDLCreateJsdArray();
30 }
31 // 在此处放置用户代码以初始化页面
32 }
33 private void BindDDLCreateJsdArray()
34 {
35 string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
36 SqlConnection conn = new SqlConnection(ConnectionString);
37 string sql = "select b.d_name as bname,b.d_id as bid,s.d_id as sid,s.d_name as sname,ss.d_id as ssid,ss.d_name as ssname from SmallClass1 s,BigClass b,SmallClass2 ss where b.d_id=s.d_classid and s.d_id=ss.d_classid";
38 SqlCommand cmd = new SqlCommand(sql, conn);
39 conn.Open();
40 SqlDataReader dr = cmd.ExecuteReader();
41 StringBuilder sb = new StringBuilder();
42 sb.Append("<script language=javascript>\n");
43 //定义JS数组
44 sb.Append("var arrSmallClass2 = new Array();\n");
45 sb.Append("var arrSmallClass1 = new Array();\n");
46 ListItem lt = new ListItem("=选择大类=", "");
47 DropDownList1.Items.Add(lt);
48 lt = new ListItem("=选择小类1=", "");
49 DropDownList2.Items.Add(lt);
50 lt = new ListItem("=选择小类2=", "");
51 DropDownList3.Items.Add(lt);
52 int i = 0;
53 int j = 0;
54 int PreBigClassId = 0;
55 int PreSmallClass1Id = 0;
56 while(dr.Read())
57 {
58 string BigClassName = dr["bname"].ToString();
59 int BigClassId = Convert.ToInt32(dr["bid"].ToString());
60 string SmallClass1Name = dr["sname"].ToString();
61 int SmallClass1ID = Convert.ToInt32(dr["sid"].ToString());
62 string SmallClass2Name = dr["ssname"].ToString();
63 int SmallClass2ID = Convert.ToInt32(dr["ssid"].ToString());
64 lt = new ListItem(BigClassName, BigClassId.ToString());
65 //防止创建重复值
66 if(BigClassId != PreBigClassId)
67 {
68 DropDownList1.Items.Add(lt);
69 PreBigClassId = BigClassId;
70 }
71 lt = new ListItem(SmallClass1Name, SmallClass1ID.ToString());
72 if(SmallClass1ID != PreSmallClass1Id)
73 {
74 DropDownList2.Items.Add(lt);
75 PreSmallClass1Id = SmallClass1ID;
76 /*
77 给JS数组赋值。
78 注意:JS中不能直接创建二维数组,要创建可以这样
79 var arrTest = new Array();
80 arrTest[0] = new Array();
81 arrTest[0][0] = 1
82 */
83 sb.Append("arrSmallClass1["+ j +"] = new Array();\n");
84 sb.Append("arrSmallClass1["+ j +"][0] = " + SmallClass1ID.ToString() + ";\n");
85 sb.Append("arrSmallClass1["+ j +"][1] = \"" + SmallClass1Name + "\";\n");
86 sb.Append("arrSmallClass1["+ j +"][2] = " + BigClassId + ";\n");
87 j++;
88 }
89 sb.Append("arrSmallClass2["+ i +"] = new Array();\n");
90 sb.Append("arrSmallClass2["+ i +"][0] = " + SmallClass2ID.ToString() + ";\n");
91 sb.Append("arrSmallClass2["+ i +"][1] = \"" + SmallClass2Name + "\";\n");
92 sb.Append("arrSmallClass2["+ i +"][2] = " + SmallClass1ID + ";\n");
93 i++;
94 }
95 sb.Append("</script>");
96 //将JS字符串输出到客户端
97 Page.Response.Write(sb.ToString());
98 //大类change事件
99 DropDownList1.Attributes.Add("onchange", "change1();change2()");
100 //小类1change事件
101 DropDownList2.Attributes.Add("onchange", "change2();");
102 }
103 Web 窗体设计器生成的代码
123 }
124}
125
转自:laifangsong