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 相关文章推荐
某页码显示的helper 少量调整,另附js版
Sep 12 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
JS面向对象之单选框实现
Jan 17 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使用cookie保存用户登录的用户名实例
2015/01/26 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
读书活动总结范文
2014/04/26 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
门店店长岗位职责
2015/04/14 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android