.NET中实现无刷新客户端联动下拉菜单

.NET中实现无刷新客户端联动下拉菜单 (无刷新) (通过下拉菜单动态显示不同图片也可也该方法实现)
<% @ Page language = " c# "  Codebehind = " WebForm1.aspx.cs "  AutoEventWireup = " false "  Inherits = " CustomManager.company.WebForm1 "   %>
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN "   >
< HTML >
  < HEAD >
   < title > WebForm1 </ 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 " >
   < LINK href = " ../css/style.css "  type = " text/css "  rel = " stylesheet " >
  </ HEAD >
  < body MS_POSITIONING = " GridLayout " >
   < form id = " Form1 "  method = " post "  runat = " server " >
    < asp:dropdownlist id = " DropDownList1 "  style = " Z-INDEX: 101; LEFT: 40px; POSITION: absolute; TOP: 168px "
    runat = " server " ></ asp:dropdownlist >

<!-- 以下的label中隐藏存放一级栏目和二级栏目对应的内容 -->
< asp:label id = " Label1 "  style = " display:none; "  runat = " server " > Label </ asp:label >


    < asp:DropDownList id = " DropDownList2 "  style = " Z-INDEX: 104; LEFT: 40px; POSITION: absolute; TOP: 264px "
    runat = " server " ></ asp:DropDownList ></ form >
< script LANGUAGE = " javascript " >
// 将隐藏的字符串取出来，然后分割到一个数组中去
var str  =  document.getElementById( " Label1 " ).innerText;
arr = str.split( " , " );
a = arr.length
ar = new  Array()
for  (i = 0 ;i < a;i ++ ) {
  ar[i]=arr[i].split("-");
}
onecount = ar.length;


// 此处实现联动
function  ld()  {
  document.Form1.DropDownList2.length=0
  lid=Form1.DropDownList1.value;       
  for  (i=0;i<onecount;i++)  { 
    if  (ar[i][0]  ==  lid) {
   document.Form1.DropDownList2.options.add(new Option(ar[i][2],  ar[i][1]));    
    }    
  }   
}   
/**/ /*换图片的方法
function changeimg()
{
 document.Form1.faceimage.src="images/face/"+document.Form1.userface.value;
}

*/
function showMsg()
{
 alert(document.Form1.DropDownList1.value);
 alert(document.Form1.DropDownList2.value);
}

   </ script >
  </ body >
</ HTML >



以下是WebForm1.aspx.cs

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;

namespace  CustomManager.company
{
 /**//// <summary>
 /// WebForm1 的摘要说明。
 /// </summary>
 public class WebForm1 : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.DropDownList DropDownList1;
  protected System.Web.UI.WebControls.Label Label1;
  protected System.Web.UI.WebControls.DropDownList DropDownList2;
  static protected DataTable tb1;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面

   if(!Page.IsPostBack)
   {
    
   }

//给DropDownList1设置onchange事件
   DropDownList1.Attributes.Add("onchange","ld();");
   string strConn,strSql;
   System.Data.SqlClient.SqlDataAdapter da;
   

//从数据库中取出一级栏目，绑定到     DropDownList1
strConn = "server=localhost;database=custom;uid=custom;pwd=a;";
   strSql = "select * from custom.bigcalling;";
   da = new System.Data.SqlClient.SqlDataAdapter(strSql,strConn);
   DataTable tb3 = new DataTable();
   da.Fill(tb3);

   DropDownList1.DataSource = tb3;
   DropDownList1.DataTextField = "BIGCALLNAME";
   DropDownList1.DataValueField= "BIGCALLID";
   DropDownList1.DataBind();

//取出二级栏目数据，存放到一个DataTable()中
   strSql = "select * from custom.smallcalling;";
   da = new System.Data.SqlClient.SqlDataAdapter(strSql,strConn);
   tb1 = new DataTable();
   da.Fill(tb1);


//以下就是将一级和二级菜单的内容，分别以"-"和","隔开
//然后存放到 Label1中,这样客户端就可以通过脚本取得所需要的数据了
   Label1.Text = "";

   foreach(DataRow row in tb1.Rows)
   {
    Label1.Text = Label1.Text  + row["BIGCALLID"] + "-" +row["SMALLCALLID"] + "-"+row["SMALLCALLNAME"] + ",";

   }

  }

  Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /**//// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {    
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

  
 }
}

转载于:https://www.cnblogs.com/bbisky/archive/2006/03/01/340407.html