目标达到的效果:两个下拉框,第二个跟随第一个变化而变化,使用客户端脚本JavaScript在ASP.NET环境下实现。
第一步:建立JavaScript脚本:
在Page_Load中建立并注册这个js脚本:
stringscriptKey="MenuChange";
if(!Page.IsStartupScriptRegistered(scriptKey)&&!Page.IsPostBack)
{
stringscriptBlock=
@"<scriptlanguage=""JavaScript"">
<!--
functionInitBigClass()
{
bigclass=newArray();
bigclass[0]=newArray();
bigclass[0][0]='0';
bigclass[0][1]='全部论坛';
bigclass[1]=newArray();
bigclass[1][0]='3';
bigclass[1][1]='Web开发';
bigclass[2]=newArray();
bigclass[2][0]='4';
bigclass[2][1]='软件工程/管理';
}
functionInitSmallClass()
{
smallclass=newArray();
smallclass[0]=newArray();
smallclass[0][0]='301';
smallclass[0][1]='ASP';
smallclass[0][2]='3';//此处与上面的大类对应
smallclass[1]=newArray();
smallclass[1][0]='303';
smallclass[1][1]='PHP';
smallclass[1][2]='3';
smallclass[2]=newArray();
smallclass[2][0]='401';
smallclass[2][1]='软件工程';
smallclass[2][2]='4';
smallclass[3]=newArray();
smallclass[3][0]='403';
smallclass[3][1]='软件测试';
smallclass[3][2]='4';
}
InitBigClass();
InitSmallClass();
functionchangeitem(myfrm)//主要js的函数!!!
{
varSelectedBigId,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]=newOption(smallclass[i][1],smallclass[i][0]);
++j;
}
}
}
//-->
</script>";
Page.RegisterClientScriptBlock(scriptKey,scriptBlock);//注册这个脚本
}
第二步:在页面中加入两个<select>
<selectid="bigclassid"onchange="javascript:changeitem(document.Form1);"name="bigclassid">(Form的id为Form1)
<optionvalue="0"selected>全部论坛</option>
…
</select>
<selectid="smallclassid"name="smallclassid">
<option>请您选择</option>
</select>
注意select的id和name属性要与上面的js相一致。
第三步:在Button_OnClick()中加入代码
inti;
for(i=0;i<Request.Form.Count;i++)
if(Request.Form.AllKeys[i].ToString()=="smallclassid")
break;//从form中找到这个select(根据id或者name查找)
intSelectValue=Request.Form.GetValues(i)[0];//这个值就是select选中的值