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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 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扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
JS中的作用域链
2017/03/01 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python实现图片压缩代码实例
2019/08/12 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
介绍一下gcc特性
2015/10/31 面试题
高三上学期学习自我评价
2014/04/23 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
小学家长学校培训材料
2014/08/24 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
志愿服务心得体会
2016/01/15 职场文书
《中彩那天》教学反思
2016/02/24 职场文书