Welcome 微信登录

首页 / 脚本样式 / JavaScript / jQuery 下拉列表 二级联动插件分享

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下载地址