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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 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中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
pandas数据拼接的实现示例
2020/04/16 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
自主招生自荐信范文
2013/12/04 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL