如何从JSON创建HTML选择选项

How to create HTML select option from JSON

本文关键字:HTML 选择 选项 创建 JSON      更新时间:2023-09-26

我有一个JSON文件

{
    "1990": [ 1, 2, 3 ],
    "1991": [ 4, 5, 6 ]
    // and so on...
};

我有一个HTML文件,因为有大量的数据,所以我必须循环使用它。

<select name="year" id="year">
    <option value="1990">1</option>
    <option value="1990">2</option>
    <option value="1990">3</option>
    <option value="1991">4</option>
    <option value="1991">5</option>
</select>

我已经尝试过这种方法,但它不起作用。这是否建议我如何解决它。

http://jsfiddle.net/MuGj7/

提前感谢,欢迎提出建议。

只需迭代对象并为每次迭代附加一个选项元素:

var obj = {
    "1990": [ 1, 2, 3 ],
    "1991": [ 4, 5, 6 ]  
};
for (var i in obj) {
  for (var y in obj[i]) {
    $('#year').append($('<option value="' + i + '" data-value="' + i + '">' + obj[i][y] + '</option>'));
  }  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="year" id="year"><select>