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控制分页打印、打印分页示例
Feb 08 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
vue实现图书管理系统
Dec 29 Vue.js
如何利用JavaScript编写一个格斗小游戏
Jan 06 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 函数中使用static的说明
2012/06/01 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
use jscript List Installed Software
2007/06/11 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
JS实现多选框的操作
2020/06/24 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
Pandas 同元素多列去重的实例
2018/07/03 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
python两种注释用法的示例
2020/10/09 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
企划主管岗位职责
2013/12/12 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
高质量“欢迎词”
2019/04/03 职场文书
导游词之吉林花园山
2019/10/17 职场文书
JS数组去重详情
2021/11/07 Javascript