【IT168技术文档】
在做一个文章添加功能时，想在选择大类后，自动将其所属二级小类显示出来，使用DropDownList的SelectedIndexChanged事件可以很容易实现，但每次选择后页面总要刷新一次，让人感觉很不爽。为实现DropDownList无刷新二级联动，这几天在网上找了些资料，但都无法达到我想要的效果，经过反复调试，现已基本实现了此功能，现将代码附下。1 <%@ Page language="c#" Codebehind="DropTest.aspx.cs" AutoEventWireup="false" Inherits="studyWEB.DropTest" %> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 3 <HTML> 4 <HEAD> 5 <title>WebForm2</title> 6 <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> 7 <meta content="C#" name="CODE_LANGUAGE"> 8 <meta content="JavaScript" name="vs_defaultClientScript"> 9 <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> 10 <script> 11 function load(ClassID){ //ClassID为接收传递的大类编号 12 var drp2 = document.getElementById("DropDownList2"); 13 function RemoveAll(oElem) { //清除DropDownList2的所有项 14 var i = 0; 15 for (i = oElem.length; i >= 0; i--){ 16 oElem.options.remove(i); 17 } 18 } 19 RemoveAll(drp2) 20 var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP"); 21 var oDoc = new ActiveXObject("MSXML2.DOMDocument"); 22 oHttpReq.open("POST", "DropChild.aspx?ClassID="+ClassID, false); //调用读取小类数据的页面，将大类 23 // 编号值传递过去 24 oHttpReq.send(""); 25 result = oHttpReq.responseText; 26 oDoc.loadXML(result); 27 items1 = oDoc.selectNodes("//CLASSNAME/Table/ClassName"); //读取所有请求大类所属小类的类名 28 items2 = oDoc.selectNodes("//CLASSNAME/Table/ClassID"); //读取所有请求大类所属小类的编号 29 var itemsLength=items1.length; 30 for(i=0;i<itemsLength;i++) //将小类的类名和编号赋予DropDownList2 31 { 32 var newOption = document.createElement("OPTION"); 33 newOption.text=items1[i].text; 34 newOption.value=items2[i].text; 35 drp2.options.add(newOption); 36 } 37 } 38 </script> 39 </HEAD> 40 <body MS_POSITIONING="flowLayout"> 41 <form id="Form1" method="post" runat="server"> 42 <asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList> 43 <asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList> 44 <asp:TextBox id="TH" runat="server" BorderStyle="None" ForeColor="White" BorderColor="White"></asp:TextBox> 45 <asp:Label id="Label1" runat="server"></asp:Label> 46 <asp:Button id="Button1" runat="server" Text="Button"></asp:Button> 47 </form> 48 </body> 49 </HTML>
一、数据库设计：
