asp.net中的联动菜单使用客户端脚本JavaScript

目标达到的效果：两个下拉框，第二个跟随第一个变化而变化，使用客户端脚本
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" onchange="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选中的值