本文實例講述了js實現簡單的聯動菜單效果。分享給大家供大家參考。具體如下：
這是一個最簡單的js聯動菜單代碼，在DW里可以自動生成，不想在DW里生成的話，把此份代碼拷貝下拉修改也可以。網頁上常用到一種Select聯動菜單。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-select-ld-menu-codes/
具體代碼如下：
<html><head><title>簡單的Select聯動菜單代碼</title></head><body><FORM name="F1"><SELECT NAME="select1" onChange="set_list(this.options.selectedIndex)"><OPTION SELECTED>流行音樂</OPTION><OPTION>網上書籍</OPTION><OPTION>軟件下載</OPTION></SELECT><SELECT NAME="select2" > <OPTION SELECTED>請選網站</OPTION> </SELECT><SCRIPT LANGUAGE="JavaScript"> var l=document.F1.select1.options.length;//取得第一下拉菜單的選項數目var group=new Array(l)//根據這個數目創建數組for (i=0; i<l; i++)//上一個數組的每一個元素也是數組group[i]=new Array() //接下來創建選項，為第二下拉菜單定義內容group[0][0]=new Option("CNTV","http://www.cntv.cn") group[0][1]=new Option("音樂天堂","#") group[0][2]=new Option("搜狗音樂","http://mp3.sogou.com/") group[1][0]=new Option("網頁特效","/jscss") group[1][1]=new Option("白鹿書院","http://www.readlink.net") group[2][0]=new Option("華軍軟件園","http://www.newhua.com") group[2][1]=new Option("搜狐下載 ","http://it.sohu.com/download/") group[2][2]=new Option("中國下載","http://www.download.com.cn") var selobj=document.F1.select2; //設定需要動態改變的對象是第二下拉菜單 function set_list(x) //x表示第一菜單被選定的內容{ for (m=selobj.options.length-1;m>0;m--) //先清除第二菜單的選項selobj.options[m]=null for (i=0;i<group[x].length;i++){//根據第一菜單的選定序號，叢控件數組中提取菜單選項放進第二菜單selobj.options[i]=group[x][i]//這里也可以創建新的對象，例如：selobj.options[i]=new Option(group[x][i].text,group[x][i].value) } selobj.options[0].selected=true//選定第0號選項} function go(){//這個函數用來將窗口導航到指定的URLlocation=selobj.options[selobj.selectedIndex].value} </SCRIPT> </FORM> <p><INPUT TYPE="BUTTON" NAME="Button" VALUE="go" onclick="go()" style="background-color: #FFFFFF; float: left; font-family: Arial Black; font-size: 10pt; font-weight: bold; text-decoration: blink; color: #000000; font-style: italic; border-style: solid; border-width: 1"></p><p> </p></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
