Question

我想只使用JavaScript在选择框中填充JSON数据。我不能使用JQuery或Angular。

这是我的HTML

<select name="fieldType" id="fieldType">
    <option value="selectFieldType">Select Field Type</option>  
</select>

这是我的JSON

"records": [
    "Date",
    "String"
]

请您指导我如何解决这个问题。

Answer 1

要做的步骤，

First Parse JSON
计算Parsed JSON数组的长度
循环json数组以获取每条记录
附加到您的html

＆＃13;

<div class="container">
  <h1 class="innertext">
    Lorem Ipsum Dolor Sit
  </h1>
  <svg class="one" viewBox="0 0 500 500" preserveAspectRatio="none">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#05aed9;"></path>
</svg>

  <svg class="two" viewBox="0 0 500 500" preserveAspectRatio="none">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,1 Z" style="stroke: none; fill:#1e90ff;"></path>
</svg>


  <svg class="three" viewBox="0 0 500 500" preserveAspectRatio="none">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,1 Z" style="stroke: none; fill:#004681;"></path>
</svg>

</div>

＆＃13;

arrayValues.map({ $0.url})

＆＃13;

Answer 2

var text = "<select name='fieldType' id='fieldType'>";
for (i = 0; i < records.length ; i++) {
    text += "<option>" + records[i] + "</option>";
}
text += "</select>";
document.getElementById("demo").innerHTML = text;

Answer 3

您可以使用此代码 -

var node =document.getElementById("fieldType");
for(i=0;i<data.length;i++){
var option = document.createElement("option");
option.text = data[i];
//option.value = data[i];
node.add(option);
}

以下是工作样本 -

https://jsfiddle.net/8n2tp25h/

Answer 4

只需解析JSON并在循环中添加元素

＆＃13;

var myJsonStr = '{"records": ["Date","String"]}';
var myJson = JSON.parse(myJsonStr);

var sel = document.getElementById("fieldType");

for(let i=0; i < myJson.records.length; i++){
  let opt = document.createElement('option');
  opt.value = i;
  opt.text = myJson.records[i];
  sel.add(opt);
}

＆＃13;

<select name="fieldType" id="fieldType">
    <option value="selectFieldType">Select Field Type</option>  
</select>

＆＃13;

仅使用JavaScript如何在selectbox中填充JSON数据

4 个答案: