相信三级菜单都很常见, 但是四级呢? 直接上代码吧
首先写四级联动我们要知道数据的格式, 可参考三级城市联动, 数据代码如下
- var data = [
- {
- "code": 10,
- "name": "浙江省",
- "child": [
- {
- "code": 1001,
- "name": "杭州市",
- "child": [
- {
- "code": 100101,
- "name": "余杭区",
- "child": [
- {
- "code": 10010101,
- "name": "仓前"
- },
- {
- "code": 10010102,
- "name": "良储"
- },
- {
- "code": 10010103,
- "name": "杭县"
- }
- ]
- },
- {
- "code": 100102,
- "name": "滨江区",
- "child": [
- {
- "code": 10010201,
- "name": "长河"
- },
- {
- "code": 10010202,
- "name": "西兴"
- },
- {
- "code": 10010203,
- "name": "秋溢路"
- }
- ]
- }
- ]
- },
- {
- "code": 1002,
- "name": "嘉兴",
- "child": [
- {
- "code": 100201,
- "name": "秀州区",
- "child": [
- {
- "code": 10020101,
- "name": "丁香花园"
- },
- {
- "code": 10020102,
- "name": "万豪广场"
- },
- {
- "code": 10020103,
- "name": "新中国际"
- }
- ]
- }
- ]
- },
- {
- "code": 1003,
- "name": "桐乡",
- "child": [
- {
- "code": 100302,
- "name": "乌镇",
- "child": [
- {
- "code": 10030201,
- "name": "杨村"
- },
- {
- "code": 10030202,
- "name": "三家村"
- },
- {
- "code": 10030202,
- "name": "新港村"
- }
- ]
- }
- ]
- }
- ]
- },
- {
- "code": 20,
- "name": "河南",
- "child": [
- {
- "code": 2001,
- "name": "郑州",
- "child": [
- {
- "code": 200101,
- "name": "金水区",
- "child": [
- {
- "code": 20010101,
- "name": "郑州海洋馆"
- },
- {
- "code": 20010102,
- "name": "北站"
- },
- {
- "code": 20010103,
- "name": "省立中心"
- }
- ]
- },
- {
- "code": 200102,
- "name": "二七区",
- "child": [
- {
- "code": 20010201,
- "name": "郑大"
- },
- {
- "code": 20010202,
- "name": "万达广场"
- },
- {
- "code": 20010203,
- "name": "客运总站"
- }
- ]
- }
- ]
- },
- {
- "code": 2002,
- "name": "信阳市",
- "child": [
- {
- "code": 200201,
- "name": "新县",
- "child": [
- {
- "code": 20020101,
- "name": "千斤镇"
- },
- {
- "code": 20020102,
- "name": "箭河镇"
- },
- {
- "code": 20020103,
- "name": "郭家河乡"
- }
- ]
- },
- {
- "code": 200202,
- "name": "光山县",
- "child": [
- {
- "code": 20020201,
- "name": "槐店乡"
- },
- {
- "code": 20020202,
- "name": "马畈镇"
- },
- {
- "code": 20020203,
- "name": "南向店乡"
- }
- ]
- }
- ]
- },
- {
- "code": 2003,
- "name": "安阳市",
- "child": [
- {
- "code": 200302,
- "name": "文峰区",
- "child": [
- {
- "code": 20030201,
- "name": "安阳站"
- },
- {
- "code": 20030202,
- "name": "殷墟博物馆"
- }
- ]
- }
- ]
- }
- ]
- }
- ]
然后开始我们一把辛酸一把泪的层层嵌套了
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- </head>
- <body>
- <label>
- <span > 选择地区 </span>
- <select id="area">
- <option > 请选择 </option>
- </select>
- </label>
- <label>
- <span > 选择周期 </span>
- <select id="week">
- <option > 请选择 </option>
- </select>
- </label>
- <label>
- <span > 选择类型 </span>
- <select id="type">
- <option > 请选择 </option>
- </select>
- </label>
- <label>
- <span > 选择流量 </span>
- <select id="flow">
- <option > 请选择 </option>
- </select>
- </label>
- <button class="btn"> 点击 </button>
- <script src="https://cdn.bootCSS.com/jquery/2.2.1/jquery.min.js"></script>
- <script src="./fx.js"></script>
- <script>
- $(function(){
- // var data = [],
- console.log(data)
- var html = "";
- var len=data.length;
- // $.ajax({
- // method:'GET',
- // url:"./static/js/fx.json",
- // dataType:"json",
- // success:function(res){
- // data = res
- //
- // },
- // error:function(err){
- // console.log(err)
- // }
- // })
- for(var i =0;i<len;i++){
- html = `<option value="${data[i].code}">${data[i].name}</option>`
- $("#area").append(html)
- }
- $(".btn").click(function(){
- console.log(data)
- })
- $("#area").on("change",function(){
- $("#week").html("<option > 请选择 </option>")
- for(var a = 0;a<len;a++){
- if(data[a].code == $(this).val()){
- for(var x = 0;x<data[a].child.length;x++){
- html = `<option value="${data[a].child[x].code}">${data[a].child[x].name}</option>`
- $("#week").append(html)
- }
- $("#type").html("<option > 请选择 </option>")
- $("#flow").html("<option > 请选择 </option>")
- }
- }
- })
- $("#week").on("change",function(){
- $("#type").html("<option > 请选择 </option>");
- var index = $(this).val().substr(0,2);
- for(var a = 0;a<len;a++){
- if(index == data[a].code){
- for(var x = 0;x<data[a].child.length;x++){
- if($(this).val() == data[a].child[x].code){
- for(var y = 0;y<data[a].child[x].child.length;y++){
- html = `<option value="${data[a].child[x].child[y].code}">${data[a].child[x].child[y].name}</option>`
- $("#type").append(html)
- }
- }
- $("#flow").html("<option > 请选择 </option>")
- }
- }
- }
- })
- $("#type").on("change",function(){
- $("#flow").html("<option > 请选择 </option>");
- var aIndex = $(this).val().substr(0,2),
- wIndex = $(this).val().substr(0,4);
- for(var a = 0;a<len;a++){
- if(aIndex == data[a].code){
- for(var x = 0;x<data[a].child.length;x++){
- if(wIndex == data[a].child[x].code){
- for(var y = 0;y<data[a].child[x].child.length;y++){
- if($(this).val() == data[a].child[x].child[y].code){
- for(var i = 0;i<data[a].child[x].child[y].child.length;i++){
- html = `<option value="${data[a].child[x].child[y].child[i].code}">${data[a].child[x].child[y].child[i].name}</option>`
- console.log($("#flow"))
- $("#flow").append(html)
- }
- }
- }
- }
- }
- }
- }
- })
- function select(){
- }
- })
- </script>
- </body>
- </html>
三级标题
当然 , 我是自己写的数据格式, 但是很多公司都是后台传过来的数据 , 可以使用我上面注释的 ajax 方法进行请求, 跨域什么的我就不多说了
三级标题
这个代码可以优化, 诸位大神有时间可以去优化一下, 有问题请私聊
来源: http://www.qdfuns.com/article/50148/fc3408292691891cf98a1a6bc2ef06ed.html