javascript - 用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 变量移到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>