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 动态生成方法的例子
Jul 22 Javascript
JS获取随机数函数可自定义最小值最大值
May 08 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
理解JavaScript原型链
Oct 25 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
es6数值的扩展方法
Mar 11 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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优化需要注意的地方
2014/11/27 PHP
PHP处理会话函数大总结
2015/08/05 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
AJAX架构之Dojo篇
2007/04/10 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python实现微信远程控制电脑
2018/02/22 Python
Python单元测试简单示例
2018/07/03 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
python可视化实现代码
2019/01/15 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
大学生活动策划方案
2014/02/10 职场文书
模范家庭事迹材料
2014/02/10 职场文书
财务情况说明书范文
2014/05/06 职场文书
学生干部培训方案
2014/06/12 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2015年政府采购工作总结
2015/05/21 职场文书