组合框下拉树与JavaScript？

Question

写完之后，我发现下拉框的顺序颠倒了。 这不是正确的事情。 如何使用该方法确定下拉框的顺序是正确的。

但是必须根据效果来做。

 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> 

Answer 1

只需将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>