我有一个带有缩进("-")的丑陋选择列表来说明层次结构。我想使用jquery,从源到结果获取数据。
来源
<option value="12">Subcontractor</option>
<option value="108">-Surveyor</option>
<option value="62">--Excavation works</option>
<option value="554">--Concrete works</option>
<option value="44">-Demolition works</option>
<option value="103">--Site preparation works</option>
<option value="67">--Excavation works</option>
<option value="40">--Contamination works</option>
示例显示了4个级别,但级别计数未知。
结果
var result = {
"Subcontractor":12 {
"Surveyor":108 {
"Excavation works":62,
"Concrete works":554
},
"Demolition works":44 {
"Site preparation works":103,
"Excavation works":67,
"Contamination works":40
}
}
};
请注意选项值是如何仅添加到最深级别的。更新:更新的结果更容易代码和一致性,父母缺少值,应该更容易解析到这个结果。
我的jquery技能一般,但我想如果有人能建议我的方向,我就能解决这个问题。
我让您在解析对象选项方面有了一个很好的开端。花在这上面的时间比我预期的要长,在所有情况下,孩子们都是一个名为"items"的对象,每个级别都显示了价值。只需一点额外的映射和重构,您就可以获得所需的格式。
http://jsfiddle.net/charlietfl/Z6pzv/
var struct = {}, path = [], indentation = '-';
$('option').each(function (i, el) {
var
$el = $(el),
val = $el.val(),
label = $el.text(),
depth = 0,
parent = struct,
i;
while (label.substr(0, indentation.length) === indentation) {
depth += 1;
label = label.substr(indentation.length);
}
path = path.slice(0, depth);
path[depth] = label;
for (i = 0; i < path.length; i += 1) {
if (typeof parent[path[i]] !== 'object') {
parent[path[i]] = {};
}
if (i < path.length - 1) {
parent = parent[path[i]];
}
else {
parent[path[i]] = val;
}
}
});
console.log(struct);
http://jsfiddle.net/5zqZQ/4/
以前的版本:http://jsfiddle.net/5zqZQ/3/