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中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
bootstrap表单示例代码分享
May 18 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
vue实现登陆页面开发实践
May 30 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
自动分页的不完整解决方案
2007/01/12 PHP
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php一些公用函数的集合
2008/03/27 PHP
php无限遍历目录示例
2014/02/21 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Django中使用group_by的方法
2015/05/26 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python删除n行后的其他行方法
2019/01/28 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
利用python计算时间差(返回天数)
2019/09/07 Python
python中os包的用法
2020/06/01 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
公司离职证明标准范本
2014/10/05 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
车间主任岗位职责
2015/02/03 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
医院合作意向书范本
2015/05/08 职场文书
房产证明范本
2015/06/19 职场文书
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server