欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery 下拉列表 二级联动插件分享

程序员文章站 2022-06-14 23:45:01
jQuery二级联动插件：jQuery.selected 一个页面可以引用多个联动效果，使用方法： 配置js： 代码如下: var defaults = { Next...

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>

上一篇： 高效使用SSH的技巧总结

下一篇： 麒麟710千元实力派！华为畅享 9S发布：2400万超广角AI三摄

推荐阅读