jQuery 下拉列表二级联动插件

最新推荐文章于 2024-07-06 00:11:00 发布

b51808502969723

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量146

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Relict/archive/2012/03/27/selected.html

版权

jQuery二级联动插件：jQuery.selected

一个页面可以引用多个联动效果，使用方法：

配置js：

 1 var defaults = {
 2     NextSelId: '#Select2',
 3     SelTextId: '#Text1',
 4     Separator: '--',
 5     SelStrSet: [
 6         { name: '请选择', subname: '请选择'},
 7         { name: '★高起本★', subname: '计算机科学与技术|汉语言文学' },
 8         { name: '★高起专★', subname: '语文教育|文秘|学前教育|旅游管理|法律事务|经济管理|会计电算化|电子商务|计算机信息管理|软件工程|机电一体化|精细化学品生产技术|机械制造设计及自动化|播音与主持|艺术设计|书法方向艺术设计' },
 9         { name: '★专升本★', subname: '思想政治教育|汉语言文学|英语|数学与应用数学|电子信息工程|计算机科学与技术|会计学|公共事业管理|旅游管理|体育教育|音乐学|艺术设计|书法方向艺术设计'}]
10 }
11 
12 var defaults2 = {
13     NextSelId: '#Select4',
14     SelTextId: '#Text2',
15     Separator: '★',
16     SelStrSet: [
17         { name: '请选择', subname: '请选择'},
18         { name: '北京', subname: '北京1|北京2' },
19         { name: '上海', subname: '上海1|上海2|上海3|上海4' },
20         { name: '天津', subname: '天津'}]
21 }

　　配置说明：
　　NextSelId：需要联动加载的下拉列表 ID
　　SelTextId：显示选择选项的文本框 ID
　　Separator：一级菜单、二级菜单分割字符串
　　SelStrSet：配置下拉选项
　　　　[{ name: '请选择', subname: '请选择'}]
　　　　　　name：一级下拉选项；subname：二级下拉选项，多个用“|”分开；

html页面：

 1 <body>
 2 <script type="text/javascript">
 3 $(function () {
 4     $('#Select1').selected(defaults);
 5     $('#Select3').selected(defaults2);
 6     
 7 });
 8 </script>
 9 <select id="Select1">
10 </select>
11 <select id="Select2">
12 </select>
13 <input id="Text1" type="text" />
14 <br />
15 <select id="Select3">
16 </select>
17 <select id="Select4">
18 </select>
19 <input id="Text2" type="text" />
20 </body>

有好的建议请留言评论！

完整JS下载地址 JS压缩下载地址

转载于:https://www.cnblogs.com/Relict/archive/2012/03/27/selected.html

b51808502969723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 下拉列表二级联动插件

jQuery二级联动插件：jQuery.selected一个页面可以引用多个联动效果，使用方法：配置js： 1 var defaults = { 2 NextSelId: '#Select2', 3 SelTextId: '#Text1', 4 Separator: '--', 5 SelStrSet: [ 6 { name...
复制链接

扫一扫