JavaScript-联动select菜单详解

JavaScript-联动select菜单完全解析,看完本例后你将彻底了解有关网页联动菜菜的用法。如果再配上Ajax技术,那么联动的select框效果将会更好。
现在联动菜单在网页上应用得非常广泛,尤其用在导航选择上、地区选择等上。既方便又实用。选择一项后,相关连的下拉选立即显示相相关的选项来,用起来真的很方面。但看了这么多的应用效果后,却没有发现一篇较全面讲解,联动菜单的文章。今天,偶就来详尽讲下联动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{
b.options[i+1]= new Option(weeks[1],weeks[0]);
}
一个简单的for循环,一切就搞定了。b选框的第i个选项(option的长度从1开始计算,故要i加1)的显示文字(text)赋值为数组二的第i个值、选项值(value)为数组一的第i值。new Option()就是新创建一个select框的选项。
通过这样循环赋值就可以实现b选择框的选择了。
详细的例子请见下面的实例,该实例完全可以满足对select框的联动需求了。能过按钮也能上下移动multiple类的下拉框。
可以将以下的例子save成一个.html文档以查看效果。




"http://www.w3.org/TR/html4/loose.dtd">


Select to others







All made by http://jiarry.126.com" target="_blank">http://Jiarry.126.com



选定左边值添加至右边!这只是简单的试验,具体应用过程中需要对代码进行相应的修改,但如果看懂了源代码就会发现其实这都很简单! 全部JavaScript的应用。


双击左右框内项可以互相移动内容!试着将每一项操作都用一下,会有不同的效果。这里基本上概括了有关select框的联动功能,如须加入其它功能仅需要做简单修改便可。 选择多项按住Shift键双击或是进行相应操作可以一次移走或删除多项。

A框

    B框


  



      

  



添加字与值到B 添加值到B 添加字到B 逐项添加文字至B 逐项添加值至B



逐项删除B项
一次添加全部值至B框 显示B框中选定值
弹出B框中选定字 删除B框全部选中项

全部还原 输入文字添加至左边的列表框中:

添加



从左边的select框中选择以改变右边select里的内容。这里只是个简单的联动选择演示,其实都非常简单。看看源代码,自己写写也很有趣哦。还有简单而实用的方法可以实现类似效果。

selectA:
  
selectB:


添加至左边框 显示左框中选定值
弹出左框中选定字






  

All Right Reserved Please visit 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®

  Copyright@Jiarry.126.com


若有任何问题请联系李春平E-mail:Jiarry@126.com







上一篇: Javascript 单数组实现列表框两级联动三级联动
下一篇: png背景图片在ie6下透明代码
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 4017
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 开启 | [img]标签 关闭