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----文件操作
Jan 18 Javascript
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
AngularJS基础知识
Dec 21 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
另一个javascript小测验(代码集合)
2011/07/27 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
原生js实现日期联动
2015/01/12 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python导入模块交叉引用的方法
2019/01/19 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
高等教育学自荐书范文
2014/02/10 职场文书
校运会口号
2014/06/18 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
高三复习计划
2015/01/19 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
药店收银员岗位职责
2015/04/07 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android