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

最新推荐文章于 2025-08-16 22:13:48 发布

weixin_30480075

最新推荐文章于 2025-08-16 22:13:48 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

文章标签： ui c# javascript ViewUI

原文链接：http://www.cnblogs.com/bbisky/archive/2006/03/01/340407.html

.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>

</HEAD>

<asp:dropdownlist id="DropDownList1" style="Z-INDEX: 101; LEFT: 40px; POSITION: absolute; TOP: 168px"

runat="server"></asp:dropdownlist>

<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>

//将隐藏的字符串取出来，然后分割到一个数组中去

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