程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> C語言 >> 關於C語言 >> asp.net中的聯動菜單實現代碼

asp.net中的聯動菜單實現代碼

編輯:關於C語言
 

目標達到的效果:兩個下拉框,第二個跟隨第一個變化而變化,使用客戶端腳本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選中的值

 
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved