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希望各个数组项分别显示并具有yes / no值。已修改答案以允许这样做。

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;
}

使用javascript从json创建选择输入

1 个答案: