Question

我正在尝试使用Vanila JavaScript创建一些动态选择框。正如您在下面看到的那样，我将带有嵌套节点的json对象用于每个选择框作为选项。

我在使用嵌套的json对象创建for循环时遇到问题。

"use strict"

let vars = {

  kagit: {
    abr: "",
    krome: 1,
    fantezi: 6,
    kraft: 5,
    hamur: 4
   },
  ebat: {
    elli: 5,
    yetmis: 76
  },
  laminasyon:{
    parlak:7,
    mat:7
  },
  ondule:{
    bst: 88,
    tst: 0,
    dopez: 7
  },
  kesim:{
    bobst:4,
    pedal:7
  }

}

let optKagit = document.querySelector('.kagit');

let defaultOption = document.createElement('option');
defaultOption.text = 'Lütfen Seçiniz';

optKagit.add(defaultOption);
optKagit.selectedIndex = 0;

let option;
    for (let i = 0; i < vars.kagit.length; i++) {
      option = document.createElement('option');
      option.text = vars.kagit[i];
      option.value = vars.kagit[i][""];
      optKagit.add(option);
    }

这是html代码

<select name="kagit" class="kagit">
      </select>

https://jsfiddle.net/eg145y7o/1/

Answer 1

在“ vars.kagit”上带有“ for in”的样本：

for (var i in vars.kagit) {
    console.log(i, vars.kagit[i]);
}

在每个变量上带有“ Object.keys”的样本：

for (let i = 0, j = Object.keys(vars), k = j.length; i < k; i++) {
    let iVar = vars[j[i]];
    // and "for in" on each var
    for (let l in iVar) {
        console.log(l, iVar);
    }
}

Answer 2

这是克里斯托夫·吕特恩（ChristophLütjen）线索的答案。

let option;
for (const [key, value] of Object.entries(vars.kagit)) {
  option = document.createElement('option');
  option.text = key;
  option.value = value;
  optKagit.add(option);
}

从jsVanilla创建动态选择框

2 个答案: