快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)單的聯(lián)動(dòng)菜單效果

更新時(shí)間：2015年08月19日 09:38:39 作者：企鵝

這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的聯(lián)動(dòng)菜單效果,涉及javascript針對(duì)頁(yè)面元素的遍歷、讀取及設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)簡(jiǎn)單的聯(lián)動(dòng)菜單效果。分享給大家供大家參考。具體如下：

這是一個(gè)最簡(jiǎn)單的js聯(lián)動(dòng)菜單代碼，在DW里可以自動(dòng)生成，不想在DW里生成的話，把此份代碼拷貝下拉修改也可以。網(wǎng)頁(yè)上常用到一種Select聯(lián)動(dòng)菜單。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-select-ld-menu-codes/

具體代碼如下：

<html>
<head>
<title>簡(jiǎn)單的Select聯(lián)動(dòng)菜單代碼</title>
</head>
<body>
<FORM name="F1">
<SELECT NAME="select1" onChange="set_list(this.options.selectedIndex)">
<OPTION SELECTED>流行音樂(lè)</OPTION>
<OPTION>網(wǎng)上書(shū)籍</OPTION>
<OPTION>軟件下載</OPTION>
</SELECT>
<SELECT NAME="select2" >  
<OPTION SELECTED>請(qǐng)選網(wǎng)站</OPTION> 
</SELECT>

<SCRIPT LANGUAGE="JavaScript"> 
var l=document.F1.select1.options.length;
//取得第一下拉菜單的選項(xiàng)數(shù)目
var group=new Array(l)
//根據(jù)這個(gè)數(shù)目創(chuàng)建數(shù)組
for (i=0; i<l; i++)
//上一個(gè)數(shù)組的每一個(gè)元素也是數(shù)組
group[i]=new Array() 
//接下來(lái)創(chuàng)建選項(xiàng)，為第二下拉菜單定義內(nèi)容
group[0][0]=new Option("CNTV","http://www.cntv.cn") 
group[0][1]=new Option("音樂(lè)天堂","#") 
group[0][2]=new Option("搜狗音樂(lè)","http://mp3.sogou.com/") 

group[1][0]=new Option("網(wǎng)頁(yè)特效","/jscss") 
group[1][1]=new Option("白鹿書(shū)院","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("中國(guó)下載","http://www.download.com.cn") 

var selobj=document.F1.select2; //設(shè)定需要?jiǎng)討B(tài)改變的對(duì)象是第二下拉菜單
 
function set_list(x) //x表示第一菜單被選定的內(nèi)容
{ 
for (m=selobj.options.length-1;m>0;m--) //先清除第二菜單的選項(xiàng)
selobj.options[m]=null 

for (i=0;i<group[x].length;i++){
//根據(jù)第一菜單的選定序號(hào)，叢控件數(shù)組中提取菜單選項(xiàng)放進(jìn)第二菜單
selobj.options[i]=group[x][i]
//這里也可以創(chuàng)建新的對(duì)象，例如：selobj.options[i]=new Option(group[x][i].text,group[x][i].value) 
} 
selobj.options[0].selected=true
//選定第0號(hào)選項(xiàng)
} 
function go(){
//這個(gè)函數(shù)用來(lái)將窗口導(dǎo)航到指定的URL
location=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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: