Ajax数据库两级联动菜单(SQLServer版)（转载）

Ajax数据库两级联动菜单(SQLServer版)

本文转载自：http://www.mychanglai.com/TopicCenter/DetailShow.aspx/6.html

第一步：首先建立一个js文件，在LianDong.aspx文件里调用

// JScript 文件

var xmlHttp;

var BigCate;

function createXMLHttpRequest()

{

if (window.ActiveXObject)

{

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest)

{

xmlHttp = new XMLHttpRequest();

}

}

function getBigCate()

{

createXMLHttpRequest();

BigCate = document.getElementById("BigCate").value;

xmlHttp.onreadystatechange=handleStateChange;

xmlHttp.open("GET","Liandong.aspx?BigCateID="+BigCate+"",true);

xmlHttp.send(null);

}

function handleStateChange()

{

if(xmlHttp.readyState == 4)

{

if(xmlHttp.status == 200)

{

getSmallCate(xmlHttp.responseText);

}

}

}

function getSmallCate(paramValue)

{

document.getElementById("SmallCate").length = 0;

document.getElementById("SmallCate").options.add(new Option("please choose the city","0"));

if (paramValue != "")

{

var Array1 = paramValue.split("|");

for(var i = 1;i < Array1.length;i++)

{

var Array2 = Array1[i].split(",");

document.getElementById("SmallCate").options.add(new Option(Array2[0].toString(),Array2[1].toString()));

}

}

else

{

document.getElementById("SmallCate").length = 0;

}

}

第二步：在LianDong.aspx文件里调用上面的js文件，并添加两个DropDownList控件

<asp:DropDownList id="BigCate" runat="server" Width="150px" ></asp:DropDownList>

<asp:DropDownList id="SmallCate" runat="server" Width="150px"></asp:DropDownList>

<HtmlInputHidden id="myHidden" runat="server" />

第三步：在LianDong.aspx.cs文件里添加如下代码

protected void Page_Load(object sender, EventArgs e)

{

BigCate.Attributes.Add("onchange", "getBigCate()");

if (!Page.IsPostBack)

{

getBigCateValue();

getSmailCateValue();

}

}

private void getBigCateValue()

{

SqlDataReader dr;

SqlConnection myconn = new SqlConnection(connstr);

myconn.Open();

//OleDbCommand mycomm = new OleDbCommand("select BigID,BigClassName from BigClass", myconn);

SqlCommand mycomm = new SqlCommand("select BigID,BigClassName from BigClass", myconn);

dr = mycomm.ExecuteReader();

BigCate.Items.Add(new ListItem("Choose Big Class", "0"));

while (dr.Read())

{

BigCate.Items.Add(new ListItem(dr["BigClassName"].ToString(), dr["BigID"].ToString()));

}

myconn.Close();

myconn.Dispose();

}

private void getSmailCateValue()

{

if (Request.QueryString["BigCateID"] != null)

{

int BigCateID;

string stringSmallCateValue = "";

DataSet ds = new DataSet();

DataTable dt;

BigCateID = Int32.Parse(Request.QueryString["BigCateID"].ToString());

//OleDbConnection myconn = new OleDbConnection(connstr);

SqlConnection myconn = new SqlConnection(connstr);

myconn.Open();

//OleDbCommand mycomm = new OleDbCommand("select SmallID,SmallClassName from [SmallClass] where BigClass=" + BigID + "", myconn);

SqlCommand mycomm = new SqlCommand("select SmallID,SmallClassName from [SmallClass] where BigClass=" + BigCateID + "" , myconn);

//OleDbDataAdapter da = new OleDbDataAdapter(mycomm);

SqlDataAdapter da = new SqlDataAdapter(mycomm);

da.Fill(ds, "SmallTable");

dt = ds.Tables["SmallTable"];

if (dt.Rows.Count != 0)

{

for (int i = 0; i < dt.Rows.Count; i++)

{

stringSmallCateValue += "|" + dt.Rows[i]["SmallClassName"].ToString() + "," + dt.Rows[i]["SmallID"].ToString();

}

}

Response.Write(stringSmallCateValue);

Response.End();

}

}

第四步：建立两个表，一个是BigClass，里面的字段为BigID，BigClassName；

BigID	BigClassName
1	书籍
2	工具
3	软件

另一个表是SmallClass，里面的字段为SmallID，SmallClassName，BigClass

SmallID	SmallClassName	BigClass
1	Asp.net手册	1
2	SQL语句手册	1
3	下载工具	2
4	图片工具	2