Javascript 使用小胡子创建动态下拉列表

我的结构如下：

[
 "key 1": [ "val1", "val2", "val3" ],
 "key 2": [
  "key 3": [ "val4" ],
  "key 4": [ "val5" ]
 ]
]

我想从中生成下拉列表。“键1”…将是可选名称，“val1”。。。价值观。 如果所选关键点上有一个子数组，我想用这些值动态创建另一个下拉列表，直到子数组只有一个值。（与“键2”类似）

我不知道如何继续留胡子。 我可以使用

Object.keys

将第一级的所有键放入一个平面数组，但我甚至无法生成第一个下拉列表。更不用说我知道如何配合另一部分了

如果能得到一个大致的方向，说明如何做到这一点，那就太好了

以下是一些示例代码：

  const view = {
    files: getFiles(),
    "keys": function() {
      return Object.keys(this);
    }
  };

    <form>
      <select id="selector">
        <option>choose...</option>
        {{#files}}
          {{#keys}}
          <option value="">{{.}}</option>
          {{/keys}}
        {{/files}}
      </select>
    </form>

const视图={
文件：getFiles（），
“键”：函数（）{
返回Object.keys（this）；
}
};
选择。。。
{{{#文件}
{{{钥匙}
{{.}}
{{/keys}
{{/files}}

这是一个线框，选择

key1

时顶部为第一种情况，选择

key2

时底部为第一种情况。 是一种

无逻辑的

模板语法，因为没有if语句、else子句或for循环。相反，只有标签。有些标记替换为一个值，有些标记替换为nothing，其他标记替换为一系列值

因此，您无法使用

mustache

根据所选值更新呈现的HTML

在这里，我使用

onchange

事件，使用不带

mustache

模板的纯Javascript，基于先前选择的值动态创建select

var数据={
“键1”：[“键1”、“键2”、“键3”]，
“关键2”：{
“图例3”：[“val4”]，
“键4”：[“键5”]
}
}
函数renderSelect（obj）{
var array=array.isArray（obj）？obj:Object.keys（obj）
var options=['Choose'，…array].map（i=>“”+i+“”）。join（“”）
var select=document.createElement（'select'）
select.innerHTML=选项
if（！Array.isArray（obj））{
select.onchange=function（）{
//删除下一个兄弟姐妹
var sib=[]，el=this
而（el=el.nextElementSibling）同级推送（el）
sib.forEach（el=>el.remove（））
//基于值的渲染选择
renderSelect（对象[this.value]）
}
}
document.querySelector（'form'）。insertAdjacentElement（'beforeend'，select）；
}
renderSelect（数据）

是一种

无逻辑的

模板语法，因为没有if语句、else子句或for循环。相反，只有标签。有些标记替换为一个值，有些标记替换为nothing，其他标记替换为一系列值

因此，您无法使用

mustache

根据所选值更新呈现的HTML

在这里，我使用

onchange

事件，使用不带

mustache

模板的纯Javascript，基于先前选择的值动态创建select

var数据={
“键1”：[“键1”、“键2”、“键3”]，
“关键2”：{
“图例3”：[“val4”]，
“键4”：[“键5”]
}
}
函数renderSelect（obj）{
var array=array.isArray（obj）？obj:Object.keys（obj）
var options=['Choose'，…array].map（i=>“”+i+“”）。join（“”）
var select=document.createElement（'select'）
select.innerHTML=选项
if（！Array.isArray（obj））{
select.onchange=function（）{
//删除下一个兄弟姐妹
var sib=[]，el=this
而（el=el.nextElementSibling）同级推送（el）
sib.forEach（el=>el.remove（））
//基于值的渲染选择
renderSelect（对象[this.value]）
}
}
document.querySelector（'form'）。insertAdjacentElement（'beforeend'，select）；
}
renderSelect（数据）

函数过程（）{
var模板，数据，html；
template=$（'#template'）.val（）；
eval（$（'#data'）.val（））；
html=Mustache.render（模板、数据）；
$（'#html'）.text（html）；
$（'#result'）.html（html）；
}

现在连接这个插件

  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="mustache.js"></script>
  <script type="text/javascript" src="mustache-demos.js"></script>

提取#模板文本区域

使用数据对象调用eval（）

调用Mustache.render（）

插入#html文本区域

输出

函数过程（）{
var模板，数据，html；
template=$（'#template'）.val（）；
eval（$（'#data'）.val（））；
html=Mustache.render（模板、数据）；
$（'#html'）.text（html）；
$（'#result'）.html（html）；
}

现在连接这个插件

  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="mustache.js"></script>
  <script type="text/javascript" src="mustache-demos.js"></script>

提取#模板文本区域

使用数据对象调用eval（）

调用Mustache.render（）

插入#html文本区域

输出

---

您能使用该阵列的输出吗？我不理解嵌套键2和子选择，每个子选择一个项目。它就像一个文件树。你可以选择的文件，你可以更深一层的文件夹。这有用吗？键1、键3和键4是其中包含可选文件的文件夹。Key2是一个有子文件夹的文件夹。我在这里做了一个线框：你能用你想要的数组的输出来绘制草图吗？我不理解嵌套键2和子选择，每个子选择一个项目。它就像一个文件树。你可以选择的文件，你可以更深一层的文件夹。这有用吗？键1、键3和键4是其中包含可选文件的文件夹。Key2是一个有子文件夹的文件夹。我在这里制作了一个线框：