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;
}
}
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" />
<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 |