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

Question

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

例如。我的json文件是：

数据.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;
}