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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
深入讲解Vue中父子组件通信与事件触发
Mar 22 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
实现“上一页”和“下一页按钮
2006/10/09 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
javascript radio 联动效果
2009/03/04 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
js Function类型
2011/12/04 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
python求列表交集的方法汇总
2014/11/10 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
联强国际笔试题面试题
2013/07/10 面试题
小学班主任培训方案
2014/06/04 职场文书
找工作求职信
2014/07/07 职场文书
房贷工资证明范本
2015/06/12 职场文书
付款证明格式范文
2015/06/19 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书