jQuery 下拉列表 二级联动插件分享


Posted in Javascript onMarch 29, 2012

jQuery二级联动插件:jQuery.selected
一个页面可以引用多个联动效果,使用方法:
配置js:

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

配置说明:

NextSelId:需要联动加载的下拉列表 ID

SelTextId:显示选择选项的文本框 ID

Separator:一级菜单、二级菜单分割字符串

SelStrSet:配置下拉选项

[{ name: '请选择', subname: '请选择'}]

name:一级下拉选项;subname:二级下拉选项,多个用“|”分开;

html页面:

<body> 
<script type="text/javascript"> 
$(function () { 
$('#Select1').selected(defaults); 
$('#Select3').selected(defaults2); }); 
</script> 
<select id="Select1"> 
</select> 
<select id="Select2"> 
</select> 
<input id="Text1" type="text" /> 
<br /> 
<select id="Select3"> 
</select> 
<select id="Select4"> 
</select> 
<input id="Text2" type="text" /> 
</body>

有好的建议请留言评论!

完整JS下载地址

Javascript 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 #Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 #Javascript
Javascript面向对象扩展库代码分享
Mar 27 #Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 #Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 #Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 #Javascript
jquery星级插件、支持页面中多次使用
Mar 25 #Javascript
You might like
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
js Event对象的5种坐标
2011/09/12 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JS跨域问题详解
2014/11/25 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
在python3中实现更新界面
2020/02/21 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
C语言编程练习
2012/04/02 面试题
How TDD works
2012/09/30 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
感恩寄语大全
2014/04/11 职场文书
2014年人大工作总结
2014/12/10 职场文书
出纳岗位职责范本
2015/03/31 职场文书
百万英镑观后感
2015/06/09 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
深入理解python协程
2021/06/15 Python