jQuery 下拉列表 二级联动插件分享
更新时间：2012年03月29日 01:24:19 作者：
jQuery二级联动插件：jQuery.selected 一个页面可以引用多个联动效果
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下载地址
一个页面可以引用多个联动效果，使用方法：
配置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下载地址
相关文章
下面小编就为大家带来一篇修改Jquery Dialog 位置的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了jQuery实现的简单图片轮播效果,结合完整实例形式分析了jQuery结合时间函数与随机数运算操作页面元素动态变换相关实现技巧,具有不动方向滑动、淡入淡出等切换效果,代码非常简单实用,需要的朋友可以参考下2018-02-02
本文主要介绍了jquery实现下拉框左右选择功能的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
倒计时效果在我们的日常生活中经常会用到，比如说高考倒计时、元旦放假倒计时、春节放假倒计时等等，下面通过本篇文章给大家分享基于jQuery实现美观且实用的倒计时实例代码，对jquery倒计时相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了jQuery内容选择器与表单选择器,结合实例形式分析了jQuery内容选择器与表单选择器的功能、用法及相关操作注意事项,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了基于jquery实现的文字向上跑动效果类似跑马灯,需要的朋友可以参考下2014-06-06
proxy()主要用于在同样的上下文语境中指向另一个对象,下面我们就以实例解析jQuery中proxy()函数的用法,需要的朋友可以参考下2016-05-05
本文给大家分享的是2则使用jquery实现网页右侧随动广告特效的代码，非常的简单实用，有需要的小伙伴可以参考下。2016-01-01
本文是对jquery的map与get方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
用jQuery将JavaScript对象转换为querystring查询字符串的方法
这篇文章主要介绍了用jQuery将JavaScript对象转换为querystring查询字符串的方法，本文给大家分享两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
最新评论