Javascript 从对象数组创建模拟层次选择框
我想创建一个Javascript 从对象数组创建模拟层次选择框,javascript,jquery,Javascript,Jquery,我想创建一个选择框，用我的平面JSON数据显示项目及其深度。下图与Joomla CMS在层次分类中所做的相同，但使用的是PHP 我的示例数据如下（请注意，深度是无限的）： 我编写了以下代码，并通过调用Data.createTreeOptions（items）来使用它，它正在工作，但我得到的是按原始数组项排序的选项列表。我希望项目按照图片中的顺序加载到父-子项目中 var Data = { createTreeOptions: function (items) { if
选择Data.createTreeOptions（items）来使用它，它正在工作，但我得到的是按原始数组项排序的选项列表。我希望项目按照图片中的顺序加载到父-子项目中
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;
}
}
var数据={
createTreeOptions:函数（项）{
如果（！items.length）
返回“”；
var html=''，children=[]，l；
$。每个（项目、功能（）{
l=（子项类型[this.parent]！==“未定义”）？子项[this.parent]：[]；
l、 推（这个）；
children[this.parent]=l；
});
var tree=Data.treeResult（0，，[]，子级，0）；
$.each（树、函数（）{
if（typeof this.id！=“未定义”）
html+=''+this.treeemenu+''；
});
返回html；
}
，treeRecurse:函数（id、缩进、列表、子级、级别）{
if（子项的类型[id]！==“未定义”&&children[id]）{
$.each（子项[id]，函数（）{
var v=这个；
var id=v.id；
如果（v.parent==0）
text=v.text；
其他的
text='|"+v.text；
列表[id]=v；
列表[id]。树元素=缩进+文本；
列表[id]。子项=（子项类型[id]！=“未定义”）？子项[id]。长度：0；
级别++；
list=Data.treeResult（id，缩进+'-'，列表，子级，级别）；
});
}
退货清单；
}
}
只需使用以下代码即可：
<!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>
苹果
梨
香蕉
橙色
var x=document.getElementById（“mySelect”）；
for（myJSON中的var i）{
var option=document.createElement（“选项”）；
option.text=myJSON[i].text；
x、 添加（选项）；
}
如果要修改“选择使用大小”属性的大小。在特定情况下，可以通过以下方式创建和使用jQuery对象：
var项目=[{
“id”：1，
“父项”：“0”，
“文本”：“医生”
}, {
“id”：2，
“父项”：“0”，
“正文”：“诊所”
}, {
“id”：3，
“家长”：1，
“正文”：“普通医生”
}, {
“id”：4，
“家长”：1，
“案文”：“专家”
}, {
“id”：5，
“家长”：4，
“正文”：“儿童疾病专家”
}, {
“id”：6，
“家长”：4，
“正文”：“耳鼻喉科”
}];
var imagine=$（''）；
$。每个（项目，功能（i，项目）{
var parent=imagine.find（'.hierarchy-'+item.parent）；
parent.append（“”+item.text+“”）；
});
函数查找子对象（元素、缩进）{
元素子元素（'div'）。每个（函数（c，子元素）{
选择HTML+=''+'-'.重复（缩进）+$（子项）.children（'span'）.text（）；
findChildren（$（子项），缩进+1）；
});
};
var selectHtml=''；
findChildren（imagine.find（'.hierarchy-0'），0）；
$（'select'）.html（selectHtml）
要做的第一件事：打开文本编辑器并开始创建代码。第二：展示你的困境。第三：你会得到一个准确的答案。你问的方式实在太宽泛了。@skobaljic我添加了我的代码，我想我可以通过不显示自己的代码找到比我更好的解决方案。我不懂语言，但基本上你想用-
缩进项目，例如，基于父子关系？这是主要目标？@skobaljic是的，这正是目标。语言不重要，这些只是选项
元素的文本。@skobaljic我更新了我的JSON
以显示英文标题，以便于演示。你在哪里让他们的父母为我订购物品？我不明白你的问题抱歉，您的json中有一个parent属性，是否要根据父属性的编号添加该选项？或者你可以更好地向我解释你的父子关系？创建一个虚构的div，然后使用它生成选项似乎很有效！我试图用JS做同样的事情，但没有“想象力”！
<!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>