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 相关文章推荐
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
详解package.json版本号规则
Aug 01 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
JS立即执行的匿名函数用法分析
Nov 04 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
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
省三好学生申请材料
2014/01/22 职场文书
家长通知书教师评语
2014/04/17 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
另类冲刺标语
2014/06/24 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2014年林业工作总结
2014/12/05 职场文书
接待员岗位职责
2015/02/13 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
Docker下安装Oracle19c
2022/04/13 Servers
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python