JavaScript-联动select菜单完全解析，看完本例后你将彻底了解有关网页联动菜菜的用法。如果再配上Ajax技术，那么联动的select框效果将会更好。
下载与演示地址
http://lslnx.zsu.edu.cn/webspace/78229/personel_web/jiarry/resources/SelectFinally.html
现在联动菜单在网页上应用得非常广泛，尤其用在导航选择上、地区选择等上。既方便又实用。选择一项后，相关连的下拉选立即显示相相关的选项来，用起来真的很方面。但看了这么多的应用效果后，却没有发现一篇较全面讲解，联动菜单的文章。今天，偶就来详尽讲下联动select框的实现。附后的例子是非常全面的实例，包括下拉框和多行选择框效果，几乎涉及到了联动菜单的全面，其中还有很多注释的哦。
首先在名字为my的form里建两个select框,a呢，当然是选择用啦，而b就是改变后与a所选值相关的选择项。JavaScript代码就可以如下写(其实最主要用到的是new Option()这个内置函数)。我们先创建了一个ChangeSelect()函数。内容如下：
1,定义一个数组,weeks=new Array;
2,然后给数组1赋值，weeks[0]=new Array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");可以用作b选框的value。
3,再赋值给数组w, weeks[1]=new Array("星期一","星期二","星期三","星期四","星期五","星期六","星期日");可以作b选框显示文字。
4, b.options.length=weeks[0].length;b选框的选项条数与数组中的条数相对应。
5, for(i=0;i<weeks[0].length;i++)
{
b.options[i+1]= new Option(weeks[1][i],weeks[0][i]);
}
一个简单的for循环，一切就搞定了。b选框的第i个选项(option的长度从1开始计算，故要i加1)的显示文字(text)赋值为数组二的第i个值、选项值(value)为数组一的第i值。new Option()就是新创建一个select框的选项。
通过这样循环赋值就可以实现b选择框的选择了。
详细的例子请见下面的实例，该实例完全可以满足对select框的联动需求了。能过按钮也能上下移动multiple类的下拉框。
可以将以下的例子save成一个.html文档以查看效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select to others</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
a:hover{color:white; text-decoration:none;background-color:blue}
h3{color:#000066; font-family:Arial, Helvetica, sans-serif;background-color:#D2ECFF; border:1px solid #478CD1}
</style>
<script language="JavaScript" type="text/JavaScript">
//-------------------------------------------------
//Author:Jarry(Jiarry) CopyRight@http://jiarry/126.com
//作者:李春平 版权绿色生命所有 http://jiarry.126.com
//转载请注明出处，并请保留版权信息！
//---------------------------------------------------------------
function dBLclickToRight()
{
//点击添加;
var a,b;
a=document.my.a;
b=document.my.b;
/*效果与以下创建项目相同;
b.options[b.length]=new Option()
b.options[b.length-1].value=a.options[a.selectedIndex].value;
b.options[b.length-1].text=a.options[a.selectedIndex].text;
*/
if(a.options.length !=-1 )
{
/*if(b.options.length>4)
{//具体可以在此做关于框内文字及多少的限制！
alert("从左至右移动时，B框中最大限度为5项！");
}
else
{*/
//
while(a.selectedIndex !=-1 ){//加个while则可以一次转移全部被选中项，其实双击选择时这个交易不明显。除非一次选择多个且按住shift键同时双击。
b.options[b.length]=new Option(a.options[a.selectedIndex].text,a.options[a.selectedIndex].value);
//添加当前options的文字与值;
a.options[a.selectedIndex]=null;//将选中的项的清空
//}
}
}
else
{
alert("请双击A框中要移动的项")
}
}
function dBLclickToLeft()
{//试将与函数与以上的dBLclickToRight相比较，效果相同。
var a,b;
a=document.my.a;
b=document.my.b;
while(b.selectedIndex !=-1 )
{
a.options[a.options.length]=new Option()
a.options[a.length-1].value=b.options[b.selectedIndex].value;
a.options[a.length-1].text=b.options[b.selectedIndex].text;
b.options[b.selectedIndex] = null;
}
/*for(i=0;i<b.length;i++)//for循环也可一次转移多项被选择中的内容;
{//按b框中的options数循环;
//alert(b.options.length)
if(b.selectedIndex>=0)
{//如果b框中有被选择的项;a框就增加刚添加过去的项;
a.options[a.length]=new Option()
a.options[a.length-1].value=b.options[b.selectedIndex].value;
a.options[a.length-1].text=b.options[b.selectedIndex].text;
//b.options[b.selectedIndex]=new Option(i,i);
//window.confirm("are you sure?")
//{
b.options[b.selectedIndex] = null; //被选择中的等于空;
// }//
//但当减少一时，i便也少了一项。如果能得到选中项等于多少就能用for来进行删除。故删除还是用while的好。
}
}*/
}
function delAllSelected()
{//点击删除所有选择的项;
b=document.my.b;
///*
if(b.selectedIndex<0)
{
window.alert("请选择你要删除的一项或多项");
return;
}
while(b.selectedIndex !=-1 )//当b框中有被选择项时，被选择选陆续被执行以下命令;
{//用while与for效果相同;
b.options[b.selectedIndex] = null;
}
//*/
/*for(i=0;i<b.options.length;i++)
{//用for循环也能删除多个被选中项;for效果稍有不同，不如用while好。//因为用在删除中会有些错，其它的没有问题。
if(b.selectedIndex !=-1)
{//循环次数与被选择的项数相等，凡是被选中的，均执行以下；
//alert(b.options.length+" / "+b.length);
b.options[b.selectedIndex] = null;
}
}*/
}
function delSelected()
{//点击删除;这里其实很简单，只不过用了选择就变得麻烦起来了。删除完后自动选择最近的一项。
x=b.options.selectedIndex;
if(b.selectedIndex !=-1)
{//如果有一项被选中了;
b=document.my.b;
window.confirm("您确信要删除"+b.options[b.selectedIndex].text+"项吗？/n它的值是:"+b.options[b.selectedIndex].value)
{//确认是否删除选中的项目;
b.options[b.selectedIndex] = null;//选中项被删除;
//alert(x-1)
//alert(b.options.length)
// b.options.length=b.options.length-1;
if(b.options.length >0 )
{//如果删除该项后仍有一项或多项存在且......
//alert("b.length:"+b.length+"|fristSelected:"+x+" |selectedIndex:"+b.selectedIndex)
if(b.length-x > 0)//选中原被选中项的位置;
{//如果该框中项大于刚选择的项即，刚选择项下面还有一项或多项(此时已上移至刚才被删除项的位置);
b.options[x].selected=true;//选中前面选择的并已被删除了项的位置;
}
else//否则如果该选择框总项数减去刚被选择项不大于0，即原被选择项是最后一项则;
{ b.options[x-1].selected=true;}
}//选中原被选中项的上一项的位置;
}
}
else
{//如果没有任何一项被选中，
alert("请从B框中选择一项！");//提示选择！
if(b.options.length > 0){//如果没有任何一项被选中，且有一项或多项存在,选择第一项;
b.options[0].selected=true;}
}
}
</script>
</head>
<body>
<h3>All made by <a href="http://jiarry.126.com" target="_blank">http://Jiarry.126.com</a></h3><hr>
选定左边值添加至右边！这只是简单的试验，具体应用过程中需要对代码进行相应的修改，但如果看懂了源代码就会发现其实这都很简单！ 全部JavaScript的应用。
<hr>
<font color="blue" face="Arial, Helvetica, sans-serif" size="-1">双击左右框内项可以互相移动内容！试着将每一项操作都用一下，会有不同的效果。这里基本上概括了有关select框的联动功能，如须加入其它功能仅需要做简单修改便可。 选择多项按住Shift键双击或是进行相应操作可以一次移走或删除多项。</font>
<form name="my" method="post" action="">
<b><a href="javascript:window.alert('A框中共有: _fcksavedurl=""javascript:window.alert('A框中共有:" '+document.my.a.length+' 项;/n其中选中的是第: '+[document.my.a.selectedIndex+1]+' 项')">A框</a>：</b>
<select name="a" size="8" multiple style="width:80px; " onClick="DisabledIt('001')" onBlur="DisabledIt('001')" οnchange="MoveTrueOrFalse('001')" onDblClick="dBLclickToRight();DisabledIt('001')">
<option value="我aa" >aa</option>
<option value="一bb" >bb</option>
<option value="定cc" >cc</option>
<option value="会dd" >dd</option>
<option value="成ee" >ee</option>
<option value="功ff" >ff</option>
<option value="！gg" onDblClick="">gg</option>
</select>
<b><a href="javascript:alert('B框中一共有 '+document.my.b.length+' 项;/n其中选中的是第: '+(document.my.b.selectedIndex+1)+' 项')">B框</a>：</b>
<select name="b" size="8" multiple onClick="DisabledIt('002')" onBlur="DisabledIt('002')" onChange="MoveTrueOrFalse('002')" style="color:#000099; font-family:Arial, Helvetica, sans-serif; font-size:16px " onDblClick="dBLclickToLeft();DisabledIt('002')">
</select>
<br>
<Input type="button" name="up1" value="上" οnclick="moveUpDown('up',document.my.a)" disabled = "true" title="向上移动A框内的项目">
<input type="button" name="down1" value="下" οnclick="moveUpDown('down',document.my.a)" disabled="true" title="向下移动A框内的项目">
<Input type="button" name="up2" value="上" οnclick="moveUpDown('up',document.my.b)" disabled title="向上移动B框内的项目">
<input type="button" name="down2" value="下" οnclick="moveUpDown('down',document.my.b)" disabled title="向下移动B框内的项目">
<script language="JavaScript" type="text/JavaScript">
var a,b;
a=document.my.a;
b=document.my.b;
var Obj;
function MoveTrueOrFalse(aim)
{
if(aim=="001")
{
document.my.up1.disabled=false;
document.my.down1.disabled=false;
}
else if(aim=="002")
{
document.my.up2.disabled=false;
document.my.down2.disabled=false;
}
/*if(aim=="true")
{
document.my.up1.disabled=true;
document.my.down1.disabled=true;
}
else if(aim=="false")
{
document.my.up1.disabled=false;
document.my.down1.disabled=false;
}*/
}
function DisabledIt(aim)
{
if(aim=="001" && a.length <= 0)
{
document.my.up1.disabled=true;
document.my.down1.disabled=true;
}
else if(aim=="002" && b.options.length <= 0)
{
document.my.up2.disabled=true;
document.my.down2.disabled=true;
}
}
function moveUpDown(aim,Obj)
{//Obj是需用移动的对象;
//document.my.up.disabled=false;
//document.my.down.disabled=false;
//var Obj=document.my.a;
if(aim=="up")//如果向上移动;
{
if(Obj.length - Obj.selectedIndex == Obj.length)
{
alert("已是最靠上的一项了，无法再向上移动！");
return;
}
else if(Obj.selectedIndex !=-1)
{
oldSelected=Obj.selectedIndex;
oldText=Obj.options[Obj.selectedIndex].text;
oldValue=Obj.options[Obj.selectedIndex].value;
Obj.options[Obj.selectedIndex]=new Option(Obj.options[Obj.selectedIndex-1].text,Obj.options[Obj.selectedIndex-1].value)
//当前选择的项值与文字等于该选择上一项的值与文字;
Obj.options[oldSelected-1]=new Option(oldText,oldValue);
//原选择项的上一项的值与文字等于原选择的值与文字;
Obj.options[oldSelected-1].selected=true;
//原选择项的上一项被选中状态;
}
else
{
alert("请选择您要移动的一项！");return;
}
}
else if(aim=="down")//向下移动;
{
if(Obj.selectedIndex ==-1 )
{
alert("请选择您要移动的一项！");return;
}
else if(Obj.length - Obj.selectedIndex == 1)
{
alert("已是最靠下的一项了，无法再向下移动！");
return;
}
else
{
current_=Obj.selectedIndex;
current_text=Obj.options[Obj.selectedIndex].text;
current_value=Obj.options[Obj.selectedIndex].value;
Obj.options[Obj.selectedIndex]= new Option(Obj.options[Obj.selectedIndex+1].text,Obj.options[Obj.selectedIndex+1].value);
//新建一项，当前选择项值等于当前选择之下一项值;
//Obj.options[Obj.selectedIndex].text=Obj.options[Obj.selectedIndex+1].text;
//Obj.options[Obj.selectedIndex].value=Obj.options[Obj.selectedIndex+1].value;
//得到当前项下一项的值与文字;
//Obj.options[current_+1]=new Option(current_text,current_value)
Obj.options[current_+1].text=current_text;
Obj.options[current_+1].value=current_value;
//原选择中的项的下一项的文字与值分别等于原选择项的值与文字，以实现替换;
Obj.options[current_+1].selected=true;//选择原选择项的下一项;
}
}
}
function addToRight(info)
{//可以从A框同时copy单项或多项至B框中;
if(info=="ShowText")
{
if(a.selectedIndex<0)
{//如果a框有被选择的，循环添加至b框中;
//b.options[b.length]= new Option(a.options[a.options.selectedIndex].text,a.options[a.selectedIndex].text);
window.alert("请从A选择一项或多项以添加至B框！")
return;
}
for(i=0;i<a.length;i++)
{
if(a.selectedIndex!=-1){
b.options[b.length]=new Option()
b.options[b.length-1].value=a.options[a.selectedIndex].value;
b.options[b.length-1].text=a.options[a.selectedIndex].text;
a.options[a.selectedIndex].selected=false;
}
}
}
else if(info=="ShowVaule")
{
if(a.selectedIndex<0)
{
window.alert("请从A选择一项或多项以添加至B框！"); return;
}
while(a.selectedIndex !=-1)
{
b.options[b.length]= new Option(a.options[a.options.selectedIndex].value,a.options[a.selectedIndex].value);
//break;
a.options[a.selectedIndex].selected=false;//移动全部原选择项被取消选择，以免出现死循环。
}
}
}
//以下点击单个添加。试与上面可以连续添加的相比较。其实两者差不多少。
function addToRightSingle(info)
{//可以从A框同时单项copy至B框中;
//alert(a.value)
//alert(a.options[a.selectedIndex].text)
//b.options[b.length]=new Option(a.options[a.selectedIndex].value);
//b.options[b.length]=new Option(a.value);
if(a.selectedIndex != -1)
{
//b.options[b.length+1]=new Option();
b.options[b.length]=new Option();
//alert(b.length)
if(info=="ShowText")
{
b.options[b.length-1].value=a.options[a.selectedIndex].value;
b.options[b.length-1].text=a.options[a.selectedIndex].text;
// b.options[b.length].text="ss";
}
else
{
b.options[b.length-1].value=a.options[a.selectedIndex].text;
b.options[b.length-1].text=a.options[a.selectedIndex].value;
}
}
else{ alert("请从A选择一项！"); }
}
function addAllValue()
{
for(i=0;i<a.length;i++)
{
b.options[i]=new Option()
b.options[i].value=a.options[i].text;
b.options[i].text=a.options[i].value;
}
}
function addTextTo(inputInfo)
{
//alert(inputInfo.value)
if(inputInfo.value!=0)
{
b.options[b.length]=new Option()
b.options[b.length-1].value=inputInfo.value;
b.options[b.length-1].text=inputInfo.value;
}
else
{
alert("请输入内容！");
inputInfo.focus();
}
}
function alertValueOrText(parameter)
{
if(b.selectedIndex != -1)
{
if(parameter == "ShowValue")
{
window.alert("您从B框中选定的第"+b.selectedIndex+"项的值是:/n"+b.options[b.selectedIndex].value)
}
else
{
window.alert("您从B框中选定的第"+b.selectedIndex+"项的文字是:/n"+b.options[b.selectedIndex].text)
}
}
else
{
window.alert("请从B中选择一项！")
}
}
</script>
</form>
<a href="#" onClick="addToRight('ShowText')">添加字与值到B</a> <a href="#" onClick="addToRight('ShowVaule')">添加值到B</a> <a href="#" onClick="addToRight('ShowText')">添加字到B</a> <a href="#" onClick="addToRight('ShowVaule')">逐项添加文字至B</a> <a href="#" onClick="addToRight('ShowText')">逐项添加值至B</a> <br>
<br>
<a href="#" onClick="delSelected()">逐项删除B项</a>
<a href="#" onClick="addAllValue()">一次添加全部值至B框</a> <a href="#" onClick="alertValueOrText('ShowValue')">显示B框中选定值</a>
<a href="#" onClick="alertValueOrText('ShowText')">弹出B框中选定字</a> <a href="#" onClick="delAllSelected()">删除B框全部选中项</a> <br>
<a href="javascript:window.location.reload()">全部还原</a> 输入文字添加至左边的列表框中：
<input type="text" name="inputInfo" style="border:1px groove olive;width:100px; " value="">
<a href="javascript:addTextTo(document.all.inputInfo)">添加</a><br>
<hr>
从左边的select框中选择以改变右边select里的内容。这里只是个简单的联动选择演示，其实都非常简单。看看源代码，自己写写也很有趣哦。还有简单而实用的方法可以实现类似效果。
<form name="selectForm">
selectA:
<select name="select1" onChange="ChangeSelect()">
<option value="empty">---请选择---</option>
<option value="a">人物成员</option>
<option value="b">一年季度</option>
<option value="c">星期分布</option>
<option value="d">一年月份</option>
</select>
selectB:
<select name="select2" disabled>
<option>-b-</option>
</select>
<input type="text" name="enterInfo" style="border:1px groove olive;width:100px; " value="">
<a href="javascript:addTextToSelect(document.all.enterInfo)">添加至左边框</a> <a href="#" onClick="alertValueOrText2('ShowValue')">显示左框中选定值</a>
<a href="#" onClick="alertValueOrText2('ShowText')">弹出左框中选定字</a><br>
<script language="JavaScript" type="text/JavaScript">
function ChangeSelect()
{
var a,b;
a=document.selectForm.select1;
b=document.selectForm.select2;
b.disabled = false;
if(a.options[a.selectedIndex].value=="a")
{
b.options.length=4;
//b.size=4;
b.options[4]=new Option()
//for(i=0;i<4;i++)//等于0则从第一项开始写起
// for(i=1;i<4;i++)
//{
b.options[1].value="Jiarry";
b.options[1].text="我是李春平";
b.options[2].value="Weiwei";
b.options[2].text="我是胡未未";
b.options[3].value="李春平";
b.options[3].text="I am Jiarry";
b.options[4].value="胡未未";
b.options[4].text="I am Weiwei";
//}
b.options[2].selected=true;//设定为默认选项
}
if(a.options[a.selectedIndex].value=="b")
{
b.options.length=4;//将选项仅设为四项;
//alert(b.options.length=4)
b.options[4]=new Option()
//for(i=0;i<4;i++)//等于0则从第一项开始写起
// for(i=1;i<4;i++)
//{
b.options[1].value="Spring";
b.options[1].text="春季";
b.options[2].value="Summer";
b.options[2].text="夏季";
b.options[3].value="Autumn";
b.options[3].text="秋天";
b.options[4].value="Winter";
b.options[4].text="冬天";
//}
}
if(a.options[a.selectedIndex].value=="c")
{//以下是数组应用！
/*此种方式也行，更直观明了。
weeksCn=new Array("星期一","星期二","星期三","星期四","星期五","星期六","星期日");
weeksEn=new Array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
*/
weeks=new Array;//此种写法更简便，实用。
weeks[0]=new Array("Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");
weeks[1]=new Array("星期一","星期二","星期三","星期四","星期五","星期六","星期日");
//alert(weeks[0][1])
//alert(weeks.length)
//alert(weeks[0].length)
b.options.length=weeks[0].length;
for(i=0;i<weeks[0].length;i++)
{//与以下单独赋值形式同;
b.options[i+1]= new Option(weeks[1][i],weeks[0][i]);
}
/*
//options项数与组数长度同;
b.options[1]= new Option(weeks[1][0],weeks[0][0]);
b.options[2]= new Option(weeks[1][1],weeks[0][1]);
b.options[3]= new Option(weeks[1][2],weeks[0][2]);
b.options[4]= new Option(weeks[1][3],weeks[0][3]);
b.options[5]= new Option(weeks[1][4],weeks[0][4]);
b.options[6]= new Option(weeks[1][5],weeks[0][5]);
b.options[7]= new Option(weeks[1][6],weeks[0][6]);*/
/*//此种与以上效果相同;new option括号内用逗号分隔文字与值;
b.options[weeks[0].length]=new Option()
b.options[1].value=weeks[0][0];
b.options[1].text=weeks[1][0];
b.options[2].value=weeks[0][1];
b.options[2].text=weeks[1][1];
b.options[3].value=weeks[0][2];
b.options[3].text=weeks[1][2];
b.options[4].value=weeks[0][3];
b.options[4].text=weeks[1][3];
b.options[5].value=weeks[0][4];
b.options[5].text=weeks[1][4];
b.options[6].value=weeks[0][5];
b.options[6].text=weeks[1][5];
b.options[7].value=weeks[0][6];
b.options[7].text=weeks[1][6];
*/
}
//var gEmailName = "jiarry007@yahoo.com".split("@",1);
//alert(gEmailName)
if(a.options[a.selectedIndex].value=="d")
{
MonthCn=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
MonthEn=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
//alert(MonthCn.length);
//alert(MonthCn[7]);
//alert(MonthEn[5]);
b.options.length=MonthCn.length;//或者=MonthEn.length;设置option的长度;
b.options[MonthCn.length]=new Option()
for(i=0;i<MonthCn.length;i++)
{
b.options[i+1].value=MonthEn[i];
b.options[i+1].text=MonthCn[i];
}
/*//与以上for循环效果相同;
b.options[1].value=MonthEn[0];
b.options[1].text=MonthCn[0];
b.options[2].value=MonthEn[1];
b.options[2].text=MonthCn[1];
b.options[3].value=MonthEn[2];
b.options[3].text=MonthCn[2];
b.options[4].value=MonthEn[3];
b.options[4].text=MonthCn[3];
b.options[5].value=MonthEn[4];
b.options[5].text=MonthCn[4];
b.options[6].value=MonthEn[5];
b.options[6].text=MonthCn[5];
b.options[7].value=MonthEn[6];
b.options[7].text=MonthCn[6];
b.options[8].value=MonthEn[7];
b.options[8].text=MonthCn[7];
b.options[9].value=MonthEn[8];
b.options[9].text=MonthCn[8];
b.options[10].value=MonthEn[9];
b.options[10].text=MonthCn[9];
b.options[11].value=MonthEn[10];
b.options[11].text=MonthCn[10];
b.options[12].value=MonthEn[11];
b.options[12].text=MonthCn[11];
*/
}
if(a.options[a.selectedIndex].value=="empty")
{
b.options.length=1;
b.disabled=true;
}
}
function addTextToSelect(inputInfo)
{
var a,b;
b=document.selectForm.select2;
//alert(inputInfo.value)
if(inputInfo.value!=0)
{
b.disabled=false;
b.options[b.length]=new Option()
b.options[b.length-1].value=inputInfo.value;
b.options[b.length-1].text=inputInfo.value;
}
else
{
alert("请输入内容！");
inputInfo.focus();
}
}
function alertValueOrText2(xx)
{
var b=document.selectForm.select2;
if(xx=="ShowValue")
{
//window.alert(b.value)
if(b.options[b.selectedIndex].value=="")
{
window.alert("您选择的是第"+b.selectedIndex+"项，该值为:/n"+"空值！")
}
else
{
alert("您选择的是第"+b.selectedIndex+"项，该值为:/n"+b.options[b.selectedIndex].value)
}
}
else
{
window.alert("您选择的是第"+b.selectedIndex+"项:/n"+b.options[b.selectedIndex].text)
}
}
</script>
</form>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#16BE59">
<tr>
<td align="center" bgcolor="#F2FFFA" style="font-family:Arial, Helvetica, sans-serif; "><b>All Right Reserved Please visit <a href="http://jiarry.126.com" target="_blank" onMouseOver="this.style.backgroundColor='green';this.style.color='white'" onMouseOut="this.style.backgroundColor='';this.style.color='green'" style="color:green;"> http//:jiarry.126.com</a><sup>®</sup> <br>
Copyright@Jiarry.126.com</b><br>
<font size="-2">若有任何问题请联系李春平E-mail:<a href="Jiarry@126.commailto:Jiarry@126.com">Jiarry@126.com</a></font></td>
</tr>
</table>
</body>
</html>
下载与演示地址
http://lslnx.zsu.edu.cn/webspace/78229/personel_web/jiarry/resources/SelectFinally.html
<script language=vbScript>
<!--
public x(33)
x( 0 )="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆"
x( 1 )="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明"
x( 2 )="和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县"
x( 3 )="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川"
x( 4 )="石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水"
x( 5 )="太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城"
x( 6 )="呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟"
x( 7 )="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛"
x( 8 )="长春,吉林,四平,辽源,通化,白山,松原,白城,延边"
x( 9 )="哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭"
x( 10 )="南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安"
x( 11 )="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水"
x( 12 )="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州"
x( 13 )="福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德"
x( 14 )="南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶"
x( 15 )="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽"
x( 16 )="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源"
x( 17 )="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州"
x( 18 )="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界"
x( 19 )="广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮"
x( 20 )="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池"
x( 21 )="海口,三亚"
x( 22 )="成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州"
x( 23 )="贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南"
x( 24 )="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧"
x( 25 )="拉萨,日喀则,山南,林芝,昌都,阿里,那曲"
x( 26 )="西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛"
x( 27 )="兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南"
x( 28 )="银川,石嘴山,吴忠,固原"
x( 29 )="西宁,海东,海南,海北,黄南,玉树,果洛,海西"
x( 30 )="乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博 尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏"
x( 31 )=""
x( 32 )=""
x( 33 )="台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖"
function test(a,b)
dim num,x1,i
num =a.selectedIndex
x1=split(x(num),",")
b.options.length=ubound(x1)+1
For i = 0 to ubound(x1)
b.options(i).text =x1(i)
b.options(i).value = x1(i)
next
end function
-->
</script>
<body>
<select name="a" size=1 onChange="vbscript:test a,b">
<option value= 0 >北京</option>
<option value= 1 >上海</option>
<option value= 2 >天津</option>
<option value= 3 >重庆</option>
<option value= 4 >河北</option>
<option value= 5 >山西</option>
<option value= 6 >内蒙古</option>
<option value= 7 >辽宁</option>
<option value= 8 >吉林</option>
<option value= 9 >黑龙江</option>
<option value= 10 >江苏</option>
<option value= 11 >浙江</option>
<option value= 12 >安徽</option>
<option value= 13 >福建</option>
<option value= 14 >江西</option>
<option value= 15 >山东</option>
<option value= 16 >河南</option>
<option value= 17 >湖北</option>
<option value= 18 >湖南</option>
<option value= 19 >广东</option>
<option value= 20 >广西</option>
<option value= 21 >海南</option>
<option value= 22 >四川</option>
<option value= 23 >贵州</option>
<option value= 24 >云南</option>
<option value= 25 >西藏</option>
<option value= 26 >陕西</option>
<option value= 27 >甘肃</option>
<option value= 28 >宁夏</option>
<option value= 29 >青海</option>
<option value= 30 >新疆</option>
<option value= 31 >香港</option>
<option value= 32 >澳门</option>
<option value= 33 >台湾</option>
</select>
<select name="b">
</select>
拷贝到记事本.保存为.htm或.asp
