三级联动下拉菜单表单

(一)

<TITLE>三级联动</TITLE>
<div id="tar"> </div>
<script>var createDate = "2003.8.19";</script>
<SCRIPT LANGUAGE="JavaScript" DEFER>
var fMenu = ["上海","北京","广东","南京"]
var fValue = ["shanghai","beijing","guadong","nanjing"]
var sMenu = [["杨浦区","徐汇区","黄浦区","卢湾区"],["丰台区","宝定区"],["广州","深圳"],["雨花台","郊区别墅"]]
var sValue = [["yp","xh","hp","lw"],["ft","bd"],["gz","sz"],["yht"]]
var tMenu = [[["市光新村","工农三村"],["徐汇新村","徐汇高楼"],["黄浦楼宇","外滩风景"],["卢湾菜场","卢湾体育馆"]],[["亚运村","无名村"],["宝定村"]],[["广州市区","广州郊区"],["深圳市区","福田"]],[["南京市区","南京郊区"],["别墅1","别墅2"]]]

var oWhere = document.all.tar;
var ofMenu = document.createElement("<SELECT name='city'>");
var osMenu = document.createElement("<SELECT name='region'>");
var otMenu = document.createElement("<SELECT name='village'>");
with(oWhere)appendChild(ofMenu),appendChild(osMenu),appendChild(otMenu);

createMainOptions();
createSubOptions(0);
createSub2Options(0,0);

ofMenu.onchange = function() {createSubOptions(this.selectedIndex);createSub2Options(this.selectedIndex,osMenu.selectedIndex);};
osMenu.onchange = function() {createSub2Options(ofMenu.selectedIndex,this.selectedIndex);};

(二)

<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>
<!--

/*
Triple Combo Script Credit
By Hamid Cheheltani/ Website Abstraction (http://www.wsabstract.com)
Visit <A HREF="http://wsabstract.com" TARGET=_blank>http://wsabstract.com</A> for this and over 400+ other scripts
*/

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.com");
secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher.com/javascript/");
secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net");

secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("Dynamic Drive","http://www.dynamicdrive.com");
secondGroup[1][2][2]=new Option("Beginner\'s Guide to DHTML","http://www.geocities.com/ResearchTriangle/Facility/4490/");
secondGroup[1][2][3]=new Option("Web Coder","http://webcoder.com/");

secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("CGI Resources","http://www.cgi-resources.com");
secondGroup[1][3][2]=new Option("Ada\'s Intro to CGI","http://adashimar.hypermart.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","http://www.tc711.com");
secondGroup[2][1][2]=new Option("MSNBC","http://www.tc711.com");
secondGroup[2][1][3]=new Option("ABC News","http://www.tc711.com");

secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News.com","http://www.tc711.com");
secondGroup[2][2][2]=new Option("Wired","http://www.tc711.com");

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>

</td>
</tr>
</table>
</FORM>

<p><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://wsabstract.com">Website
Abstraction</a></font></p>

<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<A href="myjs.htm" target=_blank><FONT color=red> My Js Collection!</FONT></A><br><input type="button" name="Button" value="源代码" onClick= 'window.location = "view-source:" + window.location.href'></div>
<div style="display:none"><iframe name='alexa' src="http://data.alexa.com/data?cli=10&dat=snba&ver=7.0&cdt=alx_vw%3D20%26wid%3D29053%26act%3D00000000000%26ss%3D1024x768%26bw%3D1007%26t%3D1%26ttl%3D0%26rq%3D1&url=http://www.tc711.com" width=0 height=0 style="display:none"></iframe></div>

更多的三级联动下拉菜单表单请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2008-4-29