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 相关文章推荐
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
微信小程序实现录音Record功能
May 09 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产生不重复随机数的5个方法总结
2014/11/12 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
编程语言Python的发展史
2014/09/26 Python
Python中的super用法详解
2015/05/28 Python
python中引用与复制用法实例分析
2015/06/04 Python
Python错误处理操作示例
2018/07/18 Python
Python中的 enum 模块源码详析
2019/01/09 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
研究生自我鉴定范文
2013/10/30 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
安全标准化实施方案
2014/02/20 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
2014年副班长工作总结
2014/12/10 职场文书
离婚案件原告代理词
2015/05/23 职场文书