代码之家 › 专栏 › 技术社区 › wen tian

带javascript的组合框下拉树?

html jquery javascript

wen tian · 技术社区 · 6 年前

写完后,我发现下拉框的顺序是相反的。这不是正确的做法。如何使用该方法来确定下拉框的顺序是正确的。

但必须根据效果进行。。

< PRE> >代码> 二、二 __5 “_”6 艾氏三号艾氏四号 “_”七二分之一 “二-2 “五-2” “四-2” “四-3” 五、三 __Four-3 “四-4 “四-5” AX-SIX-2 < /代码>
查看图片: img src=“https://i.stack.imgur.com/55j6c.jpg”alt=“enter image description here”/>

var data=[{ “ID”:1, “名字”:“一”, “PID”:0, “水平”:0, “孩子”:[ { “ID”:2, “姓名”:“两”, “PID”:1, “水平”:1, “孩子”:[ { “ID”:3, “姓名”:“五”, “PID”:2, “水平”:2, “孩子”:[ ] },请 { “ID”:4, “name”:“六”, “PID”:2, “级别”:2, “孩子”:[ ] } ] },请 { “ID”:5, “name”:“三”, “PID”:1, “级别”:1, “孩子”:[ ] } { “ID”:6, “name”:“四”, “PID”:1, “水平”:1, “孩子”:[ { “ID”:7, “name”:“七”, “PID”:6, “水平”:2, “孩子”:[ ] } } ] } { “ID”:8, “name”:“一-2”, “PID”:0, “水平”:0, “孩子”:[ { “ID”:9, “name”:“2-2”, “PID”:8, “水平”:1, “孩子”:[ { “ID”:10, “name”:“五-2”, “PID”:9, “水平”:2, “孩子”:[ { “ID”:11, “name”:“四-2”, “PID”:10, “水平”:3, “孩子”:[ { “ID”:12, “name”:“4-3”, “PID”:11, “Level”:4级, “孩子”:[ ] } } } },请 { “ID”:13, “name”:“5-3”, “PID”:8, “水平”:1, “孩子”:[ { “ID”:14, “name”:“4-3”, “PID”:13, “水平”:2, “孩子”:[ ] },请 { “ID”:15, “name”:“四-4”, “PID”:13, “水平”:2, “孩子”:[ ] } { “ID”:16, “name”:“4-5”, “PID”:13, “水平”:2, “孩子”:[ ] } ] } { “ID”:17, “name”:“六-2”, “PID”:8, “级别”:1, “children”:[] } ] } ] var icon=新数组(“”,“”、“”、“”、“_”); //处理树层次结构数据函数getdeep(data){ (函数rec(数据、深度){ VAR STR=“”; var _prefix=(新数组(深度)).join(图标[3]); 用于(数据中的i){ if(数据[i].名称''){ 如果(深度==0){ str+=“<option value=''+data[i].id+”'>“+data[i].name+”</option>“; console.log(数据[i].名称); }否则{ 如果(i<data.length-1){ str+=“<option value=''+data[i].id+”'>“+”前缀+图标[1]+数据[i].名称+ “</选项>”; console.log(_prefix+icon[1]+data[i].名称); }否则{ str+=“<option value=''+data[i].id+”'>“+”前缀+图标[2]+数据[i].名称+ “</选项>”; console.log(_prefix+icon[2]+data[i].名称); } } } if(data[i].hasownproperty('children')&data[i].children.length)&{ rec(数据[i].子项,深度+1); } } $(“selectbox”).append(str); }(数据,0); } $(函数){ GETBACK(数据); } /代码>

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <select id=“selectbox”></select>>

< / div下拉框正确。但必须根据效果来做。 one â two â â five â â six â three â four â â seven one-2 â two-2 â â five-2 â â â four-2 â â â â four-3 â five-3 â â four-3 â â four-4 â â four-5 â six-2 请看图片: var data = [{ "id": 1, "name": "one", "pid": 0, "level": 0, "children": [{ "id": 2, "name": "two", "pid": 1, "level": 1, "children": [{ "id": 3, "name": "five", "pid": 2, "level": 2, "children": [] }, { "id": 4, "name": "six", "pid": 2, "level": 2, "children": [] } ] }, { "id": 5, "name": "three", "pid": 1, "level": 1, "children": [] }, { "id": 6, "name": "four", "pid": 1, "level": 1, "children": [{ "id": 7, "name": "seven", "pid": 6, "level": 2, "children": [] }] } ] }, { "id": 8, "name": "one-2", "pid": 0, "level": 0, "children": [{ "id": 9, "name": "two-2", "pid": 8, "level": 1, "children": [{ "id": 10, "name": "five-2", "pid": 9, "level": 2, "children": [{ "id": 11, "name": "four-2", "pid": 10, "level": 3, "children": [{ "id": 12, "name": "four-3", "pid": 11, "level": 4, "children": [] }] }] }] }, { "id": 13, "name": "five-3", "pid": 8, "level": 1, "children": [{ "id": 14, "name": "four-3", "pid": 13, "level": 2, "children": [] }, { "id": 15, "name": "four-4", "pid": 13, "level": 2, "children": [] }, { "id": 16, "name": "four-5", "pid": 13, "level": 2, "children": [] } ] }, { "id": 17, "name": "six-2", "pid": 8, "level": 1, "children": [] } ] } ] var icon = new Array('', 'â ', 'â ', 'â '); //Processing tree hierarchy data function getDeep(data) { (function rec(data, depth) { var str = ""; var _prefix = (new Array(depth)).join(icon[3]); for (i in data) { if (data[i].name || '') { if (depth === 0) { str += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; console.log(data[i].name); } else { if (i < data.length - 1) { str += "<option value='" + data[i].id + "'>" + _prefix + icon[1] + data[i].name + "</option>"; console.log(_prefix + icon[1] + data[i].name); } else { str += "<option value='" + data[i].id + "'>" + _prefix + icon[2] + data[i].name + "</option>"; console.log(_prefix + icon[2] + data[i].name); } } } if (data[i].hasOwnProperty('children') && data[i].children.length) { rec(data[i].children, depth + 1); } } $("#selectbox").append(str); })(data, 0); } $(function() { getDeep(data); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectbox"></select>

1 回复 | 直到 6 年前

claw68 6 年前

只需将str var移出rec函数

var data = [{
    "id": 1,
    "name": "one",
    "pid": 0,
    "level": 0,
    "children": [{
        "id": 2,
        "name": "two",
        "pid": 1,
        "level": 1,
        "children": [{
            "id": 3,
            "name": "five",
            "pid": 2,
            "level": 2,
            "children": []
          },
          {
            "id": 4,
            "name": "six",
            "pid": 2,
            "level": 2,
            "children": []
          }
        ]
      },
      {
        "id": 5,
        "name": "three",
        "pid": 1,
        "level": 1,
        "children": []
      },
      {
        "id": 6,
        "name": "four",
        "pid": 1,
        "level": 1,
        "children": [{
          "id": 7,
          "name": "seven",
          "pid": 6,
          "level": 2,
          "children": []
        }]
      }
    ]
  },
  {
    "id": 8,
    "name": "one-2",
    "pid": 0,
    "level": 0,
    "children": [{
        "id": 9,
        "name": "two-2",
        "pid": 8,
        "level": 1,
        "children": [{
          "id": 10,
          "name": "five-2",
          "pid": 9,
          "level": 2,
          "children": [{
            "id": 11,
            "name": "four-2",
            "pid": 10,
            "level": 3,
            "children": [{
              "id": 12,
              "name": "four-3",
              "pid": 11,
              "level": 4,
              "children": []
            }]
          }]
        }]
      },
      {
        "id": 13,
        "name": "five-3",
        "pid": 8,
        "level": 1,
        "children": [{
            "id": 14,
            "name": "four-3",
            "pid": 13,
            "level": 2,
            "children": []
          },
          {
            "id": 15,
            "name": "four-4",
            "pid": 13,
            "level": 2,
            "children": []
          },
          {
            "id": 16,
            "name": "four-5",
            "pid": 13,
            "level": 2,
            "children": []
          }
        ]
      },
      {
        "id": 17,
        "name": "six-2",
        "pid": 8,
        "level": 1,
        "children": []
      }
    ]

  }
]

var icon = new Array('', 'â ', 'â ', 'â   ');

//Processing tree hierarchy data
function getDeep(data) {
  var str = "";
  (function rec(data, depth) {
    var _prefix = (new Array(depth)).join(icon[3]);
    for (i in data) {
      if (data[i].name || '') {
        if (depth === 0) {
          str += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
          console.log(data[i].name);
        } else {
          if (i < data.length - 1) {
            str += "<option value='" + data[i].id + "'>" + _prefix + icon[1] + data[i].name +
              "</option>";
            console.log(_prefix + icon[1] + data[i].name);
          } else {

            str += "<option value='" + data[i].id + "'>" + _prefix + icon[2] + data[i].name +
              "</option>";
            console.log(_prefix + icon[2] + data[i].name);
          }

        }

      }
      if (data[i].hasOwnProperty('children') && data[i].children.length) {
        rec(data[i].children, depth + 1);
      }
    }
  })(data, 0);
  $("#selectbox").append(str);
}

$(function() {
  getDeep(data);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectbox"></select>