JavaScript-联动select菜单详解

最新推荐文章于 2023-10-12 11:15:52 发布

wjw07073

最新推荐文章于 2023-10-12 11:15:52 发布

阅读量271

点赞数

分类专栏： javascript 文章标签： JavaScript UP Spring Yahoo ViewUI

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

现在联动菜单在网页上应用得非常广泛，尤其用在导航选择上、地区选择等上。既方便又实用。选择一项后，相关连的下拉选立即显示相相关的选项来，用起来真的很方面。但看了这么多的应用效果后，却没有发现一篇较全面讲解，联动菜单的文章。今天，偶就来详尽讲下联动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的好。
      }
}*/

}

<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框中共有: '+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;
  }*/
}

}

}
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 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;
}
}

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