1. 引入CSS
<link rel="stylesheet" href="css/style.css">
2. 引入JS
<script src="js/jquery.min.js"></script>
3. HTML代码
<div class="select-res"> <span>请选择您主营的品类名称(多选)</span> </div> <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": "VI设计" }, { "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>