JavaScript 动态下拉菜单

Question

I have a value returned from a Promise function.我有一个从 Promise function 返回的值。 The returned value is ctis in the example.示例中的返回值为ctis 。 I then use the reduce method to return the object into the format I need.然后我使用reduce方法将 object 返回为我需要的格式。

What I need is to create three dropdown boxes that dynamically change their options based on the previously selected option from the previous select.我需要的是创建三个下拉框，它们根据之前 select 中之前选择的选项动态更改它们的选项。 I need the options to be populated from ctisData .我需要从ctisData填充选项。 The caveat to this is that Category key & Type keys will be not be the same as in the example.需要注意的是，类别键和类型键将与示例中的不同。 They can be lots of different values.它们可以是许多不同的值。 How can I accomplish this?我怎样才能做到这一点？

 const ctis = [ "Category1 / C1-Type1 / C1-T1-Item1", "Category1 / C1-Type1 / C1-T1-Item2", "Category1 / C1-Type1 / C1-T1-Item2", "Category1 / C1-Type1 / C1-T1-Item3", "Category1 / C1-Type2 / C1-T2-Item1", "Category1 / C1-Type2 / C1-T2-Item2", "Category1 / C1-Type2 / C1-T2-Item3", "Category2 / C2-Type1 / C2-T1-Item1", "Category2 / C2-Type1 / C2-T1-Item2", "Category2 / C2-Type1 / C2-T1-Item2", "Category2 / C2-Type1 / C2-T1-Item3", "Category2 / C2-Type2 / C2-T2-Item1", "Category2 / C2-Type2 / C2-T2-Item2", "Category2 / C2-Type2 / C2-T2-Item3", ]; const ctisData = ctis.reduce( (obj, line) => { const [category, type, item] = line.split(" / "); obj[category] = {...obj[category] } obj[category][type] = [...new Set([...obj[category][type] || [], item])]; return obj; }, {}); console.log(ctisData); var x = document.createElement("SELECT"); x.setAttribute("id", "mySelect"); document.body.appendChild(x); var z = document.createElement("option"); z.setAttribute("value", "category"); var t = document.createTextNode("Category"); z.appendChild(t); document.getElementById("mySelect").appendChild(z); var x2 = document.createElement("SELECT"); x2.setAttribute("id", "mySelect2"); document.body.appendChild(x2); var z2 = document.createElement("option"); z2.setAttribute("value", "type"); var t2 = document.createTextNode("Type"); z2.appendChild(t2); document.getElementById("mySelect2").appendChild(z2); var x3 = document.createElement("SELECT"); x3.setAttribute("id", "mySelect3"); document.body.appendChild(x3); var z3 = document.createElement("option"); z3.setAttribute("value", "item"); var t3 = document.createTextNode("Item"); z3.appendChild(t3); document.getElementById("mySelect3").appendChild(z3);

 <html> <body> </body> </html>

Answer 1

Made you a few utility functions.为您制作了一些实用功能。 Then I went all the way to make a working example.然后我一路做了一个工作示例。

 const ctis = [ "Category1 / C1-Type1 / C1-T1-Item1", "Category1 / C1-Type1 / C1-T1-Item2", "Category1 / C1-Type1 / C1-T1-Item2", "Category1 / C1-Type1 / C1-T1-Item3", "Category1 / C1-Type2 / C1-T2-Item1", "Category1 / C1-Type2 / C1-T2-Item2", "Category1 / C1-Type2 / C1-T2-Item3", "Category2 / C2-Type1 / C2-T1-Item1", "Category2 / C2-Type1 / C2-T1-Item2", "Category2 / C2-Type1 / C2-T1-Item2", "Category2 / C2-Type1 / C2-T1-Item3", "Category2 / C2-Type2 / C2-T2-Item1", "Category2 / C2-Type2 / C2-T2-Item2", "Category2 / C2-Type2 / C2-T2-Item3", ]; const ctisData = ctis.reduce( (obj, line) => { const [category, type, item] = line.split(" / "); obj[category] = {...obj[category] } obj[category][type] = [...new Set([...obj[category][type] || [], item])]; return obj; }, {}); // console.log(ctisData); function get_categories() { return Object.keys(ctisData) } function get_types_by_category(category) { return ctisData[category]? Object.keys(ctisData[category]): [] } function get_items_by_type_by_category(type, category) { return ctisData[category] && ctisData[category][type]? Object.values(ctisData[category][type]): [] } function do_select(select, options) { select.innerHTML = '<option>Choose</options>'; options.forEach(function(value) { var z = document.createElement("option"); z.setAttribute("value", value); z.innerText = value; select.appendChild(z) }) } var sel_category = document.createElement("SELECT"); sel_category.setAttribute("id", "category"); document.body.appendChild(sel_category); do_select(sel_category, get_categories()) sel_category.addEventListener('change', function() { do_select(sel_type, get_types_by_category(sel_category.value)) do_select(sel_item, get_items_by_type_by_category(sel_type.value, sel_category.value)) }) var sel_type = document.createElement("SELECT"); sel_type.setAttribute("id", "type"); document.body.appendChild(sel_type); sel_type.addEventListener('change', function() { do_select(sel_item, get_items_by_type_by_category(sel_type.value, sel_category.value)) }) var sel_item = document.createElement("SELECT"); sel_item.setAttribute("id", "category"); document.body.appendChild(sel_item);

JavaScript 动态下拉菜单

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-08-09 13:16:22

JavaScript 动态下拉菜单

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-08-09 13:16:22

解决方案1
1 已采纳 2022-08-09 13:16:22