js 三級關聯(lián)菜單效果實例
更新時間：2013年08月13日 16:01:33 作者：
這篇文章介紹了js 三級關聯(lián)菜單效果，有需要的朋友可以參考一下
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>js 三級關聯(lián)菜單</title>
</head>
<body>
<FORM name="isc">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1----</option>
<option>Webmaster Sites</option>
<option>News Sites</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2-----</option>
<option value=" " selected>---Select2-----</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3-----</option>
<option value=" " selected>---Select3-----</option>
</select>
<script>
var groups=document.isc.example.options.length
var group=new Array(groups)
for (I=0; I<groups; I++)
group[I]=new Array()
group[0][0]=new Option("---Select2---"," ");
group[1][0]=new Option("Now Select This One"," ");
group[1][1]=new Option("JavaScript","47");
group[1][2]=new Option("DHTML","46");
group[1][3]=new Option("CGI","45");
group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("General News","115");
group[2][2]=new Option("Technology News","116");
var temp=document.isc.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (I=0;I<group[x].length;I++){
temp.options[I]=new Option(group[x][I].text,group[x][I].value)
}
temp.options[0].selected=true
redirect1(0)
}
var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (I=0; I<groups; I++) {
secondGroup[I]=new Array(group[I].length)
for (j=0; j<group[I].length; j++) {
secondGroup[I][j]=new Array() }}
secondGroup[0][0][0]=new Option("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---"," ");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("Website Abstraction","http://wsabstract");
secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher/javascript/");
secondGroup[1][1][3]=new Option("Java-Scripts.net","http://www.dhdzp.com");
secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("Dynamic Drive","dynamicdrive");
secondGroup[1][2][2]=new Option("Beginner's Guide to DHTML","geocities/ResearchTriangle/Facility/4490/");
secondGroup[1][2][3]=new Option("Web Coder","http://sc.jb51.net/");
secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("CGI Resources","cgi-resources");
secondGroup[1][3][2]=new Option("Ada's Intro to CGI","http://play.jb51.net/");
secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("CNN","cnn");
secondGroup[2][1][2]=new Option("MSNBC","msnbc");
secondGroup[2][1][3]=new Option("ABC News","abcnews");
secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News","news");
secondGroup[2][2][2]=new Option("Wired","wired");
var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (I=0;I<secondGroup[document.isc.example.options.selectedIndex][y].length;I++){
temp1.options[I]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][I].text,secondGroup[document.isc.example.options.selectedIndex][y][I].value)
}
temp1.options[0].selected=true
}
function redirect2(z){
window.location=temp1[z].value
}
//-->
</script>
</FORM>
</body>
</html></td>
</tr>
</table>
您可能感興趣的文章:
- js下拉框二級關聯(lián)菜單效果代碼具體實現(xiàn)
- 全國省市二級聯(lián)動下拉菜單 js版
- javascript省市區(qū)三級聯(lián)動下拉框菜單實例演示
- javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
- js實現(xiàn)的全國省市二級聯(lián)動下拉選擇菜單完整實例
- 省市區(qū)三級聯(lián)動下拉框菜單javascript版
- JavaScript二維數(shù)組實現(xiàn)的省市聯(lián)動菜單
- 從QQ網(wǎng)站中提取的純JS省市區(qū)三級聯(lián)動菜單
- javascript支持區(qū)號輸入的省市二級聯(lián)動下拉菜單
- JS實多級聯(lián)動下拉菜單類，簡單實現(xiàn)省市區(qū)聯(lián)動菜單！
- javascript實現(xiàn)的全國省市縣無刷新多級關聯(lián)菜單效果代碼
相關文章
下面小編就為大家?guī)硪黄钊肜斫鈐s數(shù)組的sort排序。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
下面小編就為大家?guī)硪黄猣orm表單轉Json提交的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JS+CSS實現(xiàn)仿觸屏手機撥號盤界面及功能模擬完整實例
這篇文章主要介紹了JS+CSS實現(xiàn)仿觸屏手機撥號盤界面及功能模擬完整實例,可以實現(xiàn)逼真模擬手機撥號盤界面并實現(xiàn)點擊輸入對應號碼的功能,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了用POSTMAN發(fā)送JSON格式的POST請求示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了Next.js中處理時區(qū)的幾種常用方案推薦,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-01-01
下面小編就為大家?guī)硪黄獁3c編程挑戰(zhàn)_初級腳本算法實戰(zhàn)篇。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了基于JS+HTML5實現(xiàn)獲取手機驗證碼倒計時按鈕,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
使用Bootstrap typeahead插件實現(xiàn)搜索框自動補全的方法
這篇文章主要介紹了使用Bootstrap typeahead插件實現(xiàn)搜索框自動補全的方法的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)自定義右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
解析javascript系統(tǒng)錯誤：-1072896658的解決辦法
問題出現(xiàn)在用到ajax的場合。昨天還正常的程序，今天運行就有javascript系統(tǒng)錯誤：-1072896658的2013-07-07