javascript - 使用 javascript 从 json 创建选择输入

Question

我不知道如何写这个任务。我想创建具有共同选项的动态不同的选择输入。

例如。我的 json 文件是:

data.json

[{"name":"New York","value":"ny"},
{"name":"Los Angeles","value":"la"},
{"name":"Milan","value":"milan"},
{"name":"Rome","value":"rome"}]

常见选项是:

<option value="yes"> yes </option>
<option value="no> no</option>

通过 JS，我想创建纽约的选择选项、洛杉矶的选择选项等...我该怎么做？预先感谢您

Answer 1

简单地循环数组并使用每个数组对象的名称和值属性来构造选择列表的选项。然后将其传递给选择列表。

编辑 - 如注释中所示 - OP 希望单独显示各种数组项并具有是/否值。答案已修改以允许这样做。

var arr = [
  {"name":"New York","value":"ny"},
  {"name":"Los Angeles","value":"la"},
  {"name":"Milan","value":"milan"},
  {"name":"Rome","value":"rome"}
];

buildSelect();


function buildSelect() {
    arr.forEach(function(item){
        var label = document.createElement("label"); 
        label.innerText = item.name;
        
        var select = document.createElement("select"); 
        
        var optYes = document.createElement("option"); 
        optYes.textContent = 'Yes'; 
        
        var optNo = document.createElement("option"); 
        optNo.textContent = 'No'; 

        select.appendChild(optYes);
        select.appendChild(optNo)
          
        document.querySelector('body') 
          .appendChild(label)
          .appendChild(select);
    })
}

label {
  display: block
}


select {
  display: block;
  margin-bottom: 15px;
}