Question

我想创建一个select框，并使用我的平面JSON数据显示项目及其深度。下图是Joomla CMS在分层类别中使用PHP所做的事情。

我的样本数据如下（注意深度是无限的）：

[{
    "id": 1,
    "parent": "0",
    "text": "Doctors"
}, {
    "id": 2,
    "parent": "0",
    "text": "Clinics"
}, {
    "id": 3,
    "parent": 1,
    "text": "General doctors"
}, {
    "id": 4,
    "parent": 1,
    "text": "Experts"
}, {
    "id": 5,
    "parent": 4,
    "text": "Children diseases specialist"
}, {
    "id": 6,
    "parent": 4,
    "text": "Otorhinolaryngology"
}]

我编写了以下代码，我通过调用Data.createTreeOptions(items);来使用它并且它正在工作，但我得到的是由原始数组项排序的选项列表。我希望以parent - children排序加载项目，就像图片中那样。

var Data = {
    createTreeOptions: function (items) {
        if (!items.length)
            return '';
        var html = '', children = [], l;

        $.each(items, function () {
            l = (typeof children[this.parent] !== "undefined") ? children[this.parent] : [];
            l.push(this);
            children[this.parent] = l;
        });

        var tree = Data.treeRecurse(0, '', [], children, 0);
        $.each(tree, function () {
            if (typeof this.id !== "undefined")
                html += '<option value="' + this.id + '" data-parent="' + this.parent + '">' + this.treemenu + '</option>';
        });
        return html;
    }
    , treeRecurse: function (id, indent, list, children, level) {
        if (typeof children[id] !== "undefined" && children[id]) {
            $.each(children[id], function () {
                var v = this;
                var id = v.id;
                if (v.parent === 0)
                    text = v.text;
                else
                    text = '|_ ' + v.text;

                list[id] = v;
                list[id].treemenu = indent + text;
                list[id].children = (typeof children[id] !== "undefined") ? children[id].length : 0;
                level++;
                list = Data.treeRecurse(id, indent + ' -', list, children, level);
            });
        }
        return list;
    }
}

Answer 1

在特定情况下，您可以通过以下方式创建和使用jQuery对象：

var items = [{
    "id": 1,
    "parent": "0",
    "text": "Doctors"
}, {
    "id": 2,
    "parent": "0",
    "text": "Clinics"
}, {
    "id": 3,
    "parent": 1,
    "text": "General doctors"
}, {
    "id": 4,
    "parent": 1,
    "text": "Experts"
}, {
    "id": 5,
    "parent": 4,
    "text": "Children diseases specialist"
}, {
    "id": 6,
    "parent": 4,
    "text": "Otorhinolaryngology"
}];
var imagine = $('<div><div class="hierarchy-0"></div></div>');
$.each(items, function(i, item) {
	var parent = imagine.find('.hierarchy-'+item.parent);
   	parent.append('<div class="hierarchy-'+item.id+'"><span>'+item.text+'</span></div>');
});
function findChildren(elem, indent) {
    elem.children('div').each(function(c, child) {
        selectHtml += '<option>'+'-'.repeat(indent)+$(child).children('span').text()+'</option>';
        findChildren($(child), indent+1);
    });
};
var selectHtml = '';
findChildren(imagine.find('.hierarchy-0'), 0);
$('select').html( selectHtml );

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

同样在JSFiddle。

但是，我相信你会得到另一种更好的方法：）

Answer 2

您只需使用以下代码即可完成此操作：

<!DOCTYPE html>
<html>
<body>

<form>
  <select id="mySelect" size="1">
    <option>Apple</option>
    <option>Pear</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>


<script>

   var x = document.getElementById("mySelect");
   for(var i in myJSON){
     var option = document.createElement("option");
     option.text = myJSON[i].text;
     x.add(option);
   }

</script>

</body>
</html>

如果要修改select use size属性的大小。

从对象数组

2 个答案: