Plain JS Cascading选择未知深度 [英] Plain JS Cascading selects of unknown depth
本文介绍了Plain JS Cascading选择未知深度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
想要进行通用级联下拉，但递归很弱
代码最终应该
- 选择项目 - 衣服或小工具 - 选择时
-
- 使用Levis选择一项/ Gucci或LG / Apple - 选择时
-
-
- 选择Levis牛仔裤或夹克或Gucci鞋子或连衣裙 - 选择时
-
-
-
-
- 选择Levis牛仔裤尺码或levis夹克尺码或
-
-
-
-
-
- Gucci鞋码选择或Gucci连衣裙尺码
-
-
OR
-
-
- 选择LG电视或手机或Apple Macbook或者iPhone - 当交流时做好了
-
-
-
-
- 选择LG电视尺寸或LG电话尺寸或
-
-
-
-
-
- Apple Macbook尺寸或Apple iPhone尺寸的一个选择
-
-
当我实际递归时，我失去了一丝思绪 - 或者可能会使用过滤？
我假设一个人可以制作一组路径，然后根据路径显示/隐藏
const selObject = { - 选择项目 - ：{衣服：{ - 选择品牌 - ：{Levis：{ - 选择产品 - ：{牛仔裤：{ - 选择尺寸 - ：[ 38，39，40]}，Jackets：{ - 选择尺寸 - ：[41，42，43]}}}，//结束Levis Gucci：{ - 选择产品 - ：{鞋子：{ - 选择尺寸 - ：[45，50，55]}，连衣裙：{ - - 选择尺寸 - ：[8，9，10]}}} //结束Gucci} //终端品牌}，//结束衣服小工具：{ - 选择品牌 - ：{LG：{ - 选择产品 - ：{电视：{ - 选择尺寸 - ：[38，39，40]}，手机 ： { - 选择大小 - ： [ 8，9，10]}}}，//结束LevisApple：{ - 选择产品 - ：{Macbooks：{ - 选择尺寸 - ：[ 15，17，21]}，iPhone：{ - 选择尺寸 - ：[8，9，10]}}} //结束Apple} / / end brands} // end Gadgets} // end items} // end function createSel（obj）{Object.keys（obj）.forEach（function（item）{if（typeof obj [item] ==object） {var list = obj [item]; //console.log(item,typeof list）; if（typeof list ==object）{if（list.length）{list.forEach（function（val）{console.log（'< br />'+ val）}）} else createSel（list） } else {console.log（no，obj [item]）}}）;} window.onload = function（）{createSel（selObject）} < pre class =snippet-code-html lang-html prettyprint-override> < form name =myformid =myForm> < div id =selContainer> < / div>< / form>
解决方案
在React中执行此操作会更容易。但是对于一个简单的JS解决方案，下面的内容可能就是你的解决方案。
基本上我所做的就是使用递归来创建组件，并附加事件。
const selObject = { - Select Item - ：{Clothes ：{ - 选择品牌 - ：{Levis：{ - 选择产品 - ：{牛仔裤：{ - 选择尺寸 - ：[38，39， 40]}，夹克：{ - 选择尺寸 - ：[41，42，43]}}}，//结束LevisGucci：{ - 选择产品 - ：{鞋子：{ - 选择尺寸 - ：[45， 50，55]}，连衣裙：{ - 选择尺寸 - ：[8，9，10]}}} //结束Gucci} //终结品牌} ，//结束衣服小工具：{ - 选择品牌 - ：{LG：{ - 选择产品 - ：{电视：{ - 选择尺寸 - ：[ 38，39，40]}，电话：{ - 选择尺寸 - ：[8，9，10]}}}，//结束Levis Apple：{ - 选择产品 - ：{Macbooks：{ - 选择尺寸 - ：[15，17，21]}，iPhone：{ - - 选择尺寸 - ：[8， 9，10]}}} //结束Apple} // end brands} // end Gadgets} // end items} // end function fillDropdown（target，obj）{const sel = document.createElement（选择）; const sub = document.createElement（div）; if（typeof obj！==object）{sub.innerHTML =< p>感谢您的选择< / p>; target.appendChild（分）;返回; } target.appendChild（sel）; target.appendChild（分）; const [title，value] = Object.entries（obj）[0]; //添加我们的标题选项const option1 = document.createElement（option）; option1.innerText = title; sel.appendChild（选项1）; //现在添加子项const items = Object.entries（value）; items.forEach（（[k，v]）=> {const option = document.createElement（'option'）; option.innerText = k; sel.appendChild（option）;}）; sel.addEventListener（change，（）=> {sub.innerHTML =; if（sel.selectedIndex> 0）{const i = items [sel.selectedIndex - 1]; fillDropdown（sub，i [1 ]）;}}）; } window.onload = function（）{// createSel（selObject）; fillDropdown（document.querySelector（'＃selContainer'），selObject）;}
select {display：block;宽度：100％; padding：10px;}
< form name =myform id =myForm> < div id =selContainer> < / div>< / form>
Wanted to make a generic cascading dropdown but am weak in recursion
The code is supposed to end up with
- One select for items - clothes or gadgets - when a choice is made
- One select with either Levis/Gucci or LG/Apple - when a choice is made
- One select with either Levis jeans or jackets or Gucci shoes or dresses - when a choice is made
- One select with Levis jeans sizes OR levis jacket sizes OR
- One select with Gucci shoe sizes OR Gucci dress sizes
OR
- One select with either LG TVs or phones or Apple Macbooks or iPhones - when a choice is made
- One select with LG TV sizes OR LG Phone sizes OR
- One select with Apple Macbook sizes OR Apple iPhone sizes
I lost my train of thoughts when I got to actually recurse - or perhaps filtering can be used?
I assume one could make a set of paths and then just show/hide depending on path
const selObject = {
"-- Select Item --": {
"Clothes": {
"-- Select brands --": {
"Levis": {
"-- Select product --": {
"Jeans": {
"-- Select size --": [
"38",
"39",
"40"
]
},
"Jackets": {
"-- Select size --": [
"41",
"42",
"43"
]
}
}
}, // end Levis
"Gucci": {
"-- Select product --": {
"Shoes": {
"-- Select size --": [
"45",
"50",
"55"
]
},
"Dresses": {
"-- Select size --": [
"8",
"9",
"10"
]
}
}
} // end Gucci
} // end brands
}, // End clothes
"Gadgets": {
"-- Select brands --": {
"LG": {
"-- Select product --": {
"TVs": {
"-- Select size --": [
"38",
"39",
"40"
]
},
"Phones": {
"-- Select size --": [
"8",
"9",
"10"
]
}
}
}, // end Levis
"Apple": {
"-- Select product --": {
"Macbooks": {
"-- Select size --": [
"15",
"17",
"21"
]
},
"iPhones": {
"-- Select size --": [
"8",
"9",
"10"
]
}
}
} // end Apple
} // end brands
} // end Gadgets
} // end items
} // end
function createSel(obj) {
Object.keys(obj).forEach(function(item) {
if (typeof obj[item] == "object") {
var list = obj[item];
//console.log(item,typeof list);
if (typeof list == "object") {
if (list.length) {
list.forEach(function(val) {
console.log('<br/>'+val)
})
}
else createSel(list)
}
} else {
console.log("no", obj[item])
}
});
}
window.onload = function() {
createSel(selObject)
}
<form name="myform" id="myForm">
<div id="selContainer">
</div>
</form>
解决方案
Doing this in React would be easier,. But for a plain JS solution the below might be what your after.
Basically all I'm doing is using recursion to create the components, and attach the events.
const selObject = {
"-- Select Item --": {
"Clothes": {
"-- Select brands --": {
"Levis": {
"-- Select product --": {
"Jeans": {
"-- Select size --": [
"38",
"39",
"40"
]
},
"Jackets": {
"-- Select size --": [
"41",
"42",
"43"
]
}
}
}, // end Levis
"Gucci": {
"-- Select product --": {
"Shoes": {
"-- Select size --": [
"45",
"50",
"55"
]
},
"Dresses": {
"-- Select size --": [
"8",
"9",
"10"
]
}
}
} // end Gucci
} // end brands
}, // End clothes
"Gadgets": {
"-- Select brands --": {
"LG": {
"-- Select product --": {
"TVs": {
"-- Select size --": [
"38",
"39",
"40"
]
},
"Phones": {
"-- Select size --": [
"8",
"9",
"10"
]
}
}
}, // end Levis
"Apple": {
"-- Select product --": {
"Macbooks": {
"-- Select size --": [
"15",
"17",
"21"
]
},
"iPhones": {
"-- Select size --": [
"8",
"9",
"10"
]
}
}
} // end Apple
} // end brands
} // end Gadgets
} // end items
} // end
function fillDropdown(target, obj) {
const sel = document.createElement("select");
const sub = document.createElement("div");
if (typeof obj !== "object") {
sub.innerHTML = "<p>Thank you for your selection</p>";
target.appendChild(sub);
return;
}
target.appendChild(sel);
target.appendChild(sub);
const [title, value] = Object.entries(obj)[0];
//add our title option
const option1 = document.createElement("option");
option1.innerText = title;
sel.appendChild(option1);
//now add the sub items
const items = Object.entries(value);
items.forEach(([k, v]) => {
const option = document.createElement('option');
option.innerText = k;
sel.appendChild(option);
});
sel.addEventListener("change", () => {
sub.innerHTML = "";
if (sel.selectedIndex > 0) {
const i = items[sel.selectedIndex - 1];
fillDropdown(sub, i[1]);
}
});
}
window.onload = function() {
//createSel(selObject);
fillDropdown(
document.querySelector('#selContainer'),
selObject
);
}
select {
display: block;
width: 100%;
padding: 10px;
}
<form name="myform" id="myForm">
<div id="selContainer">
</div>
</form>
这篇关于Plain JS Cascading选择未知深度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
