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实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
详解Angular Reactive Form 表单验证
Jul 06 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
PHP实现邮件群发的源码
2013/06/18 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
党员培训思想汇报
2014/01/07 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
企业整改报告范文
2014/11/08 职场文书
订货会邀请函
2015/01/31 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书