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 相关文章推荐
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
对Layer UI 模块化的用法详解
Sep 26 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP关联链接常用代码
2012/11/05 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
node.js中watch机制详解
2014/11/17 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python数据结构之链表的实例讲解
2017/07/25 Python
如何利用python查找电脑文件
2018/04/27 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
2014年学生资助工作总结
2014/12/18 职场文书
投标售后服务承诺书
2015/04/29 职场文书
创业计划书之网络外卖
2019/10/31 职场文书