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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php常量详细解析
2015/10/27 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
如何用python写一个简单的词法分析器
2018/12/18 Python
python 默认参数相关知识详解
2019/09/18 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
django实现日志按日期分割
2020/05/21 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
大学毕业生个人自荐信范文
2014/01/08 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
地球上的星星观后感
2015/06/02 职场文书
《称赞》教学反思
2016/02/17 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python