JavaScript-联动select菜单详解
作者:wang 日期:2011-04-25
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
选定左边值添加至右边！这只是简单的试验，具体应用过程中需要对代码进行相应的修改，但如果看懂了源代码就会发现其实这都很简单！ 全部JavaScript的应用。
双击左右框内项可以互相移动内容！试着将每一项操作都用一下，会有不同的效果。这里基本上概括了有关select框的联动功能，如须加入其它功能仅需要做简单修改便可。 选择多项按住Shift键双击或是进行相应操作可以一次移走或删除多项。
添加字与值到B 添加值到B 添加字到B 逐项添加文字至B 逐项添加值至B
逐项删除B项
一次添加全部值至B框 显示B框中选定值
弹出B框中选定字 删除B框全部选中项
全部还原 输入文字添加至左边的列表框中：
添加
从左边的select框中选择以改变右边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">
All made by http://jiarry.126.com" target="_blank">http://Jiarry.126.com
选定左边值添加至右边！这只是简单的试验，具体应用过程中需要对代码进行相应的修改，但如果看懂了源代码就会发现其实这都很简单！ 全部JavaScript的应用。
双击左右框内项可以互相移动内容！试着将每一项操作都用一下，会有不同的效果。这里基本上概括了有关select框的联动功能，如须加入其它功能仅需要做简单修改便可。 选择多项按住Shift键双击或是进行相应操作可以一次移走或删除多项。
添加字与值到B 添加值到B 添加字到B 逐项添加文字至B 逐项添加值至B
逐项删除B项
一次添加全部值至B框 显示B框中选定值
弹出B框中选定字 删除B框全部选中项
全部还原 输入文字添加至左边的列表框中：
添加
从左边的select框中选择以改变右边select里的内容。这里只是个简单的联动选择演示，其实都非常简单。看看源代码，自己写写也很有趣哦。还有简单而实用的方法可以实现类似效果。
| 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 |
上一篇: 
下一篇: 
文章来自: 
引用通告: 
Tags: 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 5263
发表评论
