CSDN博客

img bakerk

asp.net中的联动菜单

发表于2004/9/15 10:41:00  849人阅读

目标达到的效果:两个下拉框,第二个跟随第一个变化而变化,使用客户端脚本JavaScriptASP.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" onchange="javascript:changeitem(document.Form1);" name= "bigclassid"> (FormidForm1)

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

</select>

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

<option>请您选择</option>

</select>

注意selectidname属性要与上面的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选中的值
0 0

相关博文

我的热门文章

img
取 消
img