前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >asp.net中的联动菜单

asp.net中的联动菜单

作者头像
Java架构师必看
发布2021-03-22 11:53:48
1.3K0
发布2021-03-22 11:53:48
举报
文章被收录于专栏:Java架构师必看

目标达到的效果:两个下拉框,第二个跟随第一个变化而变化,使用客户端脚本JavaScript在ASP.NET环境下实现。

第一步:建立JavaScript脚本:

在Page_Load中建立并注册这个js脚本:

string scriptKey = "MenuChange";

if (!Page.IsStartupScriptRegistered(scriptKey) && !Page.IsPostBack)

{

string scriptBlock = 

@"<script language=""JavaScript"">

<!--

function InitBigClass()

{

bigclass = new Array();

bigclass[0] = new Array();

bigclass[0][0] = '0';

bigclass[0][1] = '全部论坛';

bigclass[1] = new Array();

bigclass[1][0] = '3';

bigclass[1][1] = 'Web 开发';

bigclass[2] = new Array();

bigclass[2][0] = '4';

bigclass[2][1] = '软件工程/管理';

}

function InitSmallClass()

{

smallclass = new Array();

smallclass[0] = new Array();

smallclass[0][0] = '301';

smallclass[0][1] = 'ASP';

smallclass[0][2] = '3'; // 此处与上面的大类对应

smallclass[1] = new Array();

smallclass[1][0] = '303';

smallclass[1][1] = 'PHP';

smallclass[1][2] = '3';

smallclass[2] = new Array();

smallclass[2][0] = '401';

smallclass[2][1] = '软件工程';

smallclass[2][2] = '4';

smallclass[3] = new Array();

smallclass[3][0] = '403';

smallclass[3][1] = '软件测试';

smallclass[3][2] = '4';

}

InitBigClass();

InitSmallClass();

function changeitem(myfrm) // 主要js的函数!!!

{

var SelectedBigId,i,j;

for (i= myfrm.smallclassid.options.length-1;i>=0 ;--i)

{

myfrm.smallclassid.options[i] = null; 

}

SelectedBigId = myfrm.bigclassid.options[myfrm.bigclassid.selectedIndex].value;

j = 0;

for (i=0 ;i< smallclass.length ;i++)

{

if (SelectedBigId == smallclass[i][2])

{

myfrm.smallclassid.options[j] = new Option(smallclass[i][1],smallclass[i][0]); 

++j;

}

}

}

//-->

</script> ";

Page.RegisterClientScriptBlock(scriptKey, scriptBlock); // 注册这个脚本

}

第二步:在页面中加入两个<select>

<select id="bigclassid" οnchange="javascript:changeitem(document.Form1);" name= "bigclassid"> (Form的id为Form1)

<option value="0" selected>全部论坛</option>

</select>

<select id="smallclassid" name="smallclassid">

<option>请您选择</option>

</select>

注意select的id和name属性要与上面的js相一致。

第三步:在Button_OnClick()中加入代码

int i;

for(i=0;i<Request.Form.Count;i++)

if(Request.Form.AllKeys[i].ToString()=="smallclassid")

break; // 从form中找到这个select (根据id或者name查找)

int SelectValue = Request.Form.GetValues(i)[0]; //  这个值就是 select 选中的值

本文由来源 21aspnet,由 javajgs_com 整理编辑,其版权均为 21aspnet 所有,文章内容系作者个人观点,不代表 Java架构师必看 对观点赞同或支持。如需转载,请注明文章来源。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档