Heim > Artikel > Web-Frontend > js implementiert einfache Verknüpfungsmenüeffekte_Javascript-Fähigkeiten

js implementiert einfache Verknüpfungsmenüeffekte_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:44:301086Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man einen einfachen Verknüpfungsmenüeffekt mit js implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist der einfachste js-Verknüpfungsmenücode, der automatisch in DW generiert werden kann. Wenn Sie ihn nicht in DW generieren möchten, können Sie diesen Code kopieren und nach unten ziehen, um ihn zu ändern. Auf Webseiten wird häufig das Menü „Verknüpfung auswählen“ verwendet.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<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(){
//这个函数用来将窗口导航到指定的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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Simulation der mehrstufigen Auswahlmenü-Implementierungsmethode von Taobao_Javascript-FähigkeitenNächster Artikel：js-Simulation der mehrstufigen Auswahlmenü-Implementierungsmethode von Taobao_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen