以下是 jQuery商品发布三级联动菜单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery商品发布三级联动菜单代码</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<style>
body {
padding:20px;
}
.select-res span {
display: inline-block;
width:180px;
height:14px;
line-height:14px;
padding:7px 15px 7px 5px;
border:solid 1px #c0c0c0;
background:url(images/select_box_bg.gif) no-repeat 190px center;
cursor: pointer;
color:#c2c2c2;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
.select-res p {
position:relative;
width: 200px;
height:28px;
line-height:28px;
border-bottom:dashed 1px #c0c0c0;
padding:0 5px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
padding-right:20px;
}
.select-res a {
position:absolute;
top:0;
right:0;
display: block;
width:28px;
height:28px;
background:url(images/close_btn.jpg) no-repeat center;
cursor:pointer;
}
.select-res input {
width:172px;
height:14px;
line-height:14px;
margin-left:4px;
padding:7px 5px;
border:solid 1px #c0c0c0;
color:#2c2c2c;
}
.select-res span.selected {
color:#626262;
}
.select-box {
border:solid 1px #fd8340;
width:536px;
height:220px;
padding:20px 20px 10px;
position:absolute;
display:none;
z-index:5;
background: #fff;
}
.select-box .close-btn {
position:absolute;
right:5px;
top:5px;
cursor: pointer;
}
.select-box .wrap {
height:200px;
border:solid 1px #ddd;
margin-top:5px;
}
.select-box ul {
float:left;
width:178px;
height:200px;
overflow-y: scroll;
}
.select-box ul li {
height:25px;
line-height:25px;
padding:0 10px;
background: url(images/arr.gif) no-repeat 152px center;
color:#626262;
cursor: pointer;
}
.select-box ul li.selected {
background:url(images/arr_selected.gif) no-repeat 152px center #fd8340;
color:#fff;
}
</style>
</head>
<body>
<center>
<div class="select-res">
<span>请选择您主营的品类名称（多选）</span>
</div>
</center>
<div class="select-box">
<span class="close-btn">
<img src="images/close_btn.jpg" />
</span>
<div class="wrap">
<ul class="first"></ul>
<ul class="second"></ul>
<ul class="third"></ul>
</div>
</div>
<script>
var dataJson = {
"option": [{
"id": "1",
"name": "户外玩具\/设施",
"child": [{
"id": "4",
"name": "平衡木",
"child": [{
"id": "12",
"name": "塑制平衡木"
}, {
"id": "13",
"name": "木质平衡木"
}, {
"id": "14",
"name": "独木桥"
}, {
"id": "15",
"name": "平衡步道"
}]
}, {
"id": "5",
"name": "滑梯",
"child": [{
"id": "35",
"name": "组合滑梯"
}, {
"id": "36",
"name": "直筒滑梯"
}, {
"id": "37",
"name": "旋转滑梯"
}, {
"id": "38",
"name": "双排滑梯"
}, {
"id": "39",
"name": "单排滑梯"
}, {
"id": "41",
"name": "多功能滑梯"
}, {
"id": "42",
"name": "木质滑梯"
}]
}, {
"id": "6",
"name": "蹦床",
"child": [{
"id": "58",
"name": "护网蹦床"
}, {
"id": "59",
"name": "折叠蹦床"
}, {
"id": "60",
"name": "弹跳床"
}, {
"id": "61",
"name": "城堡蹦床"
}]
}, {
"id": "7",
"name": "跷跷板",
"child": [{
"id": "74",
"name": "双人跷跷板"
}, {
"id": "75",
"name": "单人跷跷板"
}, {
"id": "76",
"name": "摇马"
}, {
"id": "77",
"name": "室外跷跷板"
}, {
"id": "78",
"name": "弹簧跷跷板"
}, {
"id": "79",
"name": "摇摇乐"
}]
}, {
"id": "8",
"name": "荡船",
"child": [{
"id": "90",
"name": "彩棚荡船"
}, {
"id": "91",
"name": "公鸡荡船"
}, {
"id": "92",
"name": "秋千"
}, {
"id": "93",
"name": "吊椅"
}, {
"id": "94",
"name": "摇椅"
}, {
"id": "95",
"name": "荡桥"
}]
}, {
"id": "9",
"name": "攀岩",
"child": [{
"id": "107",
"name": "塑料攀岩"
}, {
"id": "108",
"name": "爬山坡"
}, {
"id": "109",
"name": "木质攀岩"
}, {
"id": "110",
"name": "保险带"
}, {
"id": "111",
"name": "攀岩石"
}, {
"id": "112",
"name": "安全绳"
}, {
"id": "113",
"name": "拖鞋儿童帐篷"
}, {
"id": "114",
"name": "爬网攀岩架"
}, {
"id": "115",
"name": "攀岩鞋"
}, {
"id": "116",
"name": "充气攀岩"
}]
}, {
"id": "10",
"name": "淘气堡",
"child": [{
"id": "119",
"name": "淘气堡玩具"
}, {
"id": "120",
"name": "淘气堡配件"
}, {
"id": "121",
"name": "充气城堡"
}, {
"id": "122",
"name": "小型淘气堡"
}]
}, {
"id": "11",
"name": "其他玩具",
"child": [{
"id": "137",
"name": "隧道"
}, {
"id": "138",
"name": "钻洞"
}, {
"id": "139",
"name": "轨道火车"
}, {
"id": "140",
"name": "围栏"
}, {
"id": "141",
"name": "垃圾桶"
}, {
"id": "142",
"name": "滚筒"
}, {
"id": "143",
"name": "木制设施"
}]
}]
}, {
"id": "2",
"name": "室内玩具",
"child": [{
"id": "151",
"name": "亲子玩具",
"child": [{
"id": "156",
"name": "儿童健身器材"
}, {
"id": "157",
"name": "高跷"
}, {
"id": "158",
"name": "玩具球"
}, {
"id": "159",
"name": "跨栏"
}, {
"id": "160",
"name": "跳跳袋"
}, {
"id": "161",
"name": "体能器材"
}]
}, {
"id": "152",
"name": "海洋球类",
"child": [{
"id": "162",
"name": "海洋球帐篷"
}, {
"id": "163",
"name": "澳乐海洋球"
}, {
"id": "164",
"name": "儿童帐篷"
}, {
"id": "165",
"name": "海洋球池"
}, {
"id": "1059",
"name": "决明子沙池"
}]
}, {
"id": "153",
"name": "积木",
"child": [{
"id": "166",
"name": "拼装积木"
}, {
"id": "167",
"name": "星钻积木"
}, {
"id": "168",
"name": "木质积木"
}, {
"id": "169",
"name": "乐高积木"
}, {
"id": "170",
"name": "电子积木"
}, {
"id": "171",
"name": "拼图"
}, {
"id": "172",
"name": "塑料积木"
}, {
"id": "173",
"name": "启蒙积木"
}, {
"id": "1060",
"name": "邦宝积木"
}, {
"id": "1061",
"name": "LOZ积木"
}, {
"id": "1062",
"name": "数字积木"
}]
}, {
"id": "154",
"name": "转椅",
"child": [{
"id": "174",
"name": "三座转椅"
}, {
"id": "175",
"name": "四座转椅"
}, {
"id": "176",
"name": "六座转椅"
}, {
"id": "177",
"name": "八座转椅"
}, {
"id": "178",
"name": "十二座转椅"
}, {
"id": "179",
"name": "蘑菇转椅"
}, {
"id": "180",
"name": "旋转木马"
}]
}, {
"id": "155",
"name": "软体玩具",
"child": [{
"id": "184",
"name": "软体积木"
}, {
"id": "185",
"name": "软体长椅"
}, {
"id": "186",
"name": "毛绒玩具"
}]
}, {
"id": "1057",
"name": "教学玩具",
"child": [{
"id": "1063",
"name": "益智玩具"
}, {
"id": "1064",
"name": "感官玩具"
}, {
"id": "1065",
"name": "数学玩具"
}, {
"id": "1066",
"name": "手眼协调"
}, {
"id": "1067",
"name": "拼图玩具"
}, {
"id": "1068",
"name": "其他玩具"
}]
}, {
"id": "1058",
"name": "区角器材",
"child": [{
"id": "1069",
"name": "娃娃家"
}, {
"id": "1070",
"name": "超市"
}, {
"id": "1071",
"name": "医院"
}, {
"id": "1072",
"name": "交通"
}, {
"id": "1073",
"name": "邮局"
}, {
"id": "1074",
"name": "厨房"
}, {
"id": "1075",
"name": "创意区角"
}]
}]
}, {
"id": "3",
"name": "教材\/教具",
"child": [{
"id": "200",
"name": "五大领域",
"child": [{
"id": "206",
"name": "小班教材书"
}, {
"id": "207",
"name": "中班教材书"
}, {
"id": "208",
"name": "大班教材书"
}, {
"id": "209",
"name": "成套教材书"
}]
}, {
"id": "201",
"name": "蒙氏系列",
"child": [{
"id": "218",
"name": "蒙氏教具"
}, {
"id": "219",
"name": "蒙氏数学"
}, {
"id": "220",
"name": "蒙氏教具套装"
}, {
"id": "221",
"name": "图形认知"
}, {
"id": "222",
"name": "逻辑狗"
}, {
"id": "223",
"name": "色彩认知"
}, {
"id": "224",
"name": "感官教具"
}, {
"id": "225",
"name": "益智拼图"
}, {
"id": "226",
"name": "数学棒"
}, {
"id": "227",
"name": "对数板"
}, {
"id": "1078",
"name": "早教教具"
}]
}, {
"id": "202",
"name": "音乐特色",
"child": [{
"id": "228",
"name": "音乐教材"
}, {
"id": "229",
"name": "打击乐器"
}, {
"id": "230",
"name": "手串铃"
}, {
"id": "231",
"name": "儿童木鱼"
}, {
"id": "232",
"name": "节奏棒"
}, {
"id": "233",
"name": "蛙鸣筒"
}, {
"id": "1079",
"name": "摇铃鼓"
}, {
"id": "1080",
"name": "三角铃"
}, {
"id": "1081",
"name": "方巾纱巾"
}, {
"id": "1082",
"name": "铜碰钟"
}, {
"id": "1083",
"name": "手拍鼓"
}, {
"id": "1084",
"name": "舞板响板"
}, {
"id": "1085",
"name": "三角铁"
}, {
"id": "1086",
"name": "撞钟"
}, {
"id": "1087",
"name": "棒铃"
}, {
"id": "1088",
"name": "铃鼓"
}, {
"id": "1089",
"name": "奥尔夫乐器"
}, {
"id": "1090",
"name": "手摇铃"
}, {
"id": "1091",
"name": "沙球沙锤"
}]
}, {
"id": "203",
"name": "美术特色",
"child": [{
"id": "234",
"name": "美术教材"
}, {
"id": "235",
"name": "美术教具"
}, {
"id": "236",
"name": "美术材料"
}]
}, {
"id": "204",
"name": "舞蹈特色",
"child": [{
"id": "243",
"name": "舞蹈教材"
}, {
"id": "244",
"name": "道具扇子"
}, {
"id": "245",
"name": "道具花"
}, {
"id": "246",
"name": "道具手绢"
}, {
"id": "247",
"name": "道具花伞"
}, {
"id": "248",
"name": "道具服"
}, {
"id": "1092",
"name": "道具鞋"
}, {
"id": "1093",
"name": "道具裙"
}]
}, {
"id": "205",
"name": "识字特色",
"child": [{
"id": "249",
"name": "识字教材"
}, {
"id": "250",
"name": "识字闪卡"
}, {
"id": "251",
"name": "识字玩具"
}, {
"id": "252",
"name": "识字绘本"
}]
}, {
"id": "1076",
"name": "生活特色",
"child": [{
"id": "1096",
"name": "陶艺教材教具"
}, {
"id": "1097",
"name": "烘焙教材教具"
}]
}, {
"id": "1077",
"name": "辅助器材",
"child": [{
"id": "1094",
"name": "黑板"
}, {
"id": "1095",
"name": "工作毯"
}, {
"id": "1098",
"name": "电子白板"
}, {
"id": "1099",
"name": "教学投影仪"
}, {
"id": "1100",
"name": "电子白板笔"
}, {
"id": "1101",
"name": "电子白板配件"
}, {
"id": "1102",
"name": "智能机器人"
}]
}]
}, {
"id": "256",
"name": "家具用品",
"child": [{
"id": "258",
"name": "教具架",
"child": [{
"id": "264",
"name": "杉木教具架"
}, {
"id": "265",
"name": "松木教具架"
}, {
"id": "266",
"name": "塑制教具架"
}, {
"id": "267",
"name": "教具柜"
}, {
"id": "268",
"name": "组合柜"
}]
}, {
"id": "259",
"name": "收纳柜",
"child": [{
"id": "276",
"name": "实木收纳柜"
}, {
"id": "277",
"name": "玩具收纳柜"
}, {
"id": "278",
"name": "书架"
}, {
"id": "279",
"name": "书柜"
}, {
"id": "280",
"name": "鞋柜"
}, {
"id": "281",
"name": "嵌板架"
}, {
"id": "1103",
"name": "衣帽柜"
}, {
"id": "1104",
"name": "玩具收纳盒"
}, {
"id": "1105",
"name": "工作毯架"
}]
}, {
"id": "260",
"name": "毛巾架",
"child": [{
"id": "282",
"name": "杉木毛巾架"
}, {
"id": "283",
"name": "松木毛巾架"
}, {
"id": "284",
"name": "不锈钢毛巾架"
}, {
"id": "285",
"name": "毛巾口杯架"
}, {
"id": "286",
"name": "毛巾架"
}]
}, {
"id": "261",
"name": "口杯架",
"child": [{
"id": "294",
"name": "杉木口杯架"
}, {
"id": "295",
"name": "松木口杯架"
}, {
"id": "296",
"name": "毛巾口杯架"
}, {
"id": "297",
"name": "塑制口杯架"
}, {
"id": "298",
"name": "实木口杯架"
}, {
"id": "299",
"name": "牙刷架"
}, {
"id": "300",
"name": "水杯"
}]
}, {
"id": "390",
"name": "幼儿床",
"child": [{
"id": "398",
"name": "实木幼儿床"
}, {
"id": "399",
"name": "单人床"
}, {
"id": "400",
"name": "双层床"
}, {
"id": "401",
"name": "床护栏"
}, {
"id": "402",
"name": "滑梯床"
}, {
"id": "403",
"name": "婴儿床"
}, {
"id": "404",
"name": "折叠床"
}, {
"id": "405",
"name": "塑制床"
}]
}, {
"id": "391",
"name": "桌子",
"child": [{
"id": "406",
"name": "实木桌子"
}, {
"id": "407",
"name": "升降桌"
}, {
"id": "408",
"name": "松木桌"
}, {
"id": "409",
"name": "成套桌椅"
}, {
"id": "410",
"name": "塑制桌子"
}]
}, {
"id": "392",
"name": "椅子",
"child": [{
"id": "419",
"name": "塑制椅子"
}, {
"id": "420",
"name": "靠背椅"
}, {
"id": "421",
"name": "凳子"
}, {
"id": "422",
"name": "实木椅子"
}, {
"id": "423",
"name": "成套桌椅"
}, {
"id": "424",
"name": "软体椅"
}]
}, {
"id": "393",
"name": "厨房用品",
"child": [{
"id": "435",
"name": "冰柜"
}, {
"id": "436",
"name": "消毒液"
}, {
"id": "437",
"name": "消毒灯"
}, {
"id": "438",
"name": "消毒剂"
}, {
"id": "439",
"name": "消毒柜"
}]
}]
}, {
"id": "308",
"name": "环创装饰",
"child": [{
"id": "309",
"name": "装修材料",
"child": [{
"id": "314",
"name": "室内地胶"
}, {
"id": "315",
"name": "户外塑胶"
}, {
"id": "316",
"name": "儿童漆"
}, {
"id": "317",
"name": "灯具"
}, {
"id": "318",
"name": "草坪"
}, {
"id": "319",
"name": "沙发"
}, {
"id": "320",
"name": "墙体彩绘"
}]
}, {
"id": "310",
"name": "装饰材料",
"child": [{
"id": "326",
"name": "装饰材料"
}]
}, {
"id": "311",
"name": "环创材料",
"child": [{
"id": "341",
"name": "环创材料"
}, {
"id": "342",
"name": "成品环创"
}]
}]
}, {
"id": "470",
"name": "幼儿用品",
"child": [{
"id": "471",
"name": "学习用品",
"child": [{
"id": "478",
"name": "水彩笔"
}, {
"id": "479",
"name": "本子"
}, {
"id": "480",
"name": "油画棒"
}, {
"id": "481",
"name": "胶棒"
}, {
"id": "482",
"name": "橡皮擦"
}, {
"id": "487",
"name": "防晒隔离"
}, {
"id": "1108",
"name": "书包"
}]
}, {
"id": "472",
"name": "生活用品",
"child": [{
"id": "488",
"name": "毛巾"
}, {
"id": "489",
"name": "水杯"
}, {
"id": "490",
"name": "护肤品"
}, {
"id": "491",
"name": "餐具"
}]
}, {
"id": "473",
"name": "园服鞋帽",
"child": [{
"id": "499",
"name": "园服"
}, {
"id": "500",
"name": "软底鞋"
}, {
"id": "501",
"name": "室内拖鞋"
}, {
"id": "1106",
"name": "帽子"
}]
}, {
"id": "474",
"name": "枕\/被褥",
"child": [{
"id": "502",
"name": "枕头"
}, {
"id": "503",
"name": "被子"
}, {
"id": "504",
"name": "褥子"
}, {
"id": "505",
"name": "小毛巾被"
}]
}]
}, {
"id": "530",
"name": "管理咨询",
"child": [{
"id": "531",
"name": "培训课程",
"child": [{
"id": "541",
"name": "园长培训"
}, {
"id": "542",
"name": "幼师培训"
}, {
"id": "543",
"name": "家长培训"
}]
}, {
"id": "532",
"name": "管理工具",
"child": [{
"id": "549",
"name": "管理软件"
}, {
"id": "550",
"name": "管理图书"
}, {
"id": "551",
"name": "管理系统"
}]
}, {
"id": "533",
"name": "指导派遣",
"child": [{
"id": "553",
"name": "入园指导服务"
}, {
"id": "554",
"name": "外教外派"
}, {
"id": "1107",
"name": "体育老师外派"
}]
}, {
"id": "534",
"name": "咨询设计",
"child": [{
"id": "555",
"name": "品牌策划"
}, {
"id": "556",
"name": "ＶＩ设计"
}, {
"id": "557",
"name": "招标设计"
}, {
"id": "558",
"name": "园区规划设计"
}, {
"id": "559",
"name": "装修设计"
}]
}]
}]
}
var l1 = 0,
l2 = 0;
var cname1, cname2, cname3;
var cid1, cid2, cid3;
var canClick = !0;
var canClose = !1;
$('.select-box').css({
left: $('.select-res').offset().left,
top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
});
$('span', $('.select-res')).on('click', function() {
$('.select-box').show();
if (canClick) {
$('ul', $('.select-box')).html('');
fillData();
canClick = !1;
}
});
$('span', $('.select-box')).on("click", function() {
canClose ? $('.select-box').hide() : alert('请选择下级品类！');
canClick = !0;
});
$('.select-res').on('click', 'a', function() {
$(this).parent().remove();
$('.select-box').css({
top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
});
})
$('ul.first', $('.select-box')).on('click', 'li', function() {
$(this).addClass('selected').siblings().removeClass('selected');
$('ul.third').html('');
fillData($(this).index());
l1 = $(this).index();
cname1 = $(this).text();
cid1 = $(this).attr('val');
canClose = !1;
$('input.cid', $('.select-res')).val(cid1);
$('input.cname', $('.select-res')).val(cname1);
});
$('ul.second', $('.select-box')).on('click', 'li', function() {
$(this).addClass('selected').siblings().removeClass('selected');
fillData(l1, $(this).index());
l2 = $(this).index();
cname2 = $(this).text();
cid2 = $(this).attr('val');
canClose = !1;
$('input.cid', $('.select-res')).val(cid1 + ',' + cid2);
$('input.cname', $('.select-res')).val(cname1 + ',' + cname2);
});
$('ul.third', $('.select-box')).on('click', 'li', function() {
$(this).addClass('selected').siblings().removeClass('selected');
cname3 = $(this).text();
cid3 = $(this).attr('val');
canClose = !0;
var hasExist = !1;
$('.select-res').find("p").each(function() {
if ($(this).text().split(' > ')[2] == cname3) hasExist = !0;
})
hasExist ? alert('所选品类已被添加！') : $('.select-res').append('<p>' + cname1 + ' > ' + cname2 + ' > ' + cname3 + '<a></a><input type="hidden" value="' + cid1 + ',' + cid2 + ',' + cid3 + '" name="cid[]" /><input type="hidden" value="' + cname1 + ',' + cname2 + ',' + cname3 + '" name="cname[]" /></p>');
$('.select-box').css({
top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
});
$('input.cid', $('.select-res')).val(cid1 + ',' + cid2 + ',' + cid3);
$('input.cname', $('.select-res')).val(cname1 + ',' + cname2 + ',' + cname3);
});
//填充级联数据
function fillData(l1, l2) {
var temp_html = "";
if (typeof(dataJson.option) != 'undefined' && arguments.length == 0) {
$.each(dataJson.option, function(i, pro) {
temp_html += '<li val="' + pro.id + '">' + pro.name + '</li>';
});
} else if (typeof(dataJson.option[l1].child) != 'undefined' && arguments.length == 1) {
$.each(dataJson.option[l1].child, function(i, pro) {
temp_html += '<li val="' + pro.id + '">' + pro.name + '</li>';
});
} else if (typeof(dataJson.option[l1].child[l2].child) != 'undefined' && arguments.length == 2) {
$.each(dataJson.option[l1].child[l2].child, function(i, pro) {
temp_html += '<li val="' + pro.id + '">' + pro.name + '</li>';
});
}
$('.select-box ul:eq(' + arguments.length + ')').html(temp_html);
}
</script>
</body>
</html>
CSS代码(style.css):
@charset"utf-8";@import url(base.yuxi.css);
分享到QQ
分享到微博
微信扫一扫
