如何从JSON创建HTML选择选项
How to create HTML select option from JSON
我有一个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>
相关文章:
- 从动态创建的html选择中选择所选选项
- 向html选择元素添加选项
- HTML选择,在DOM中选择了正确的选项,但在firefox中显示了错误的项目
- 构建HTML选择字段并使用JavaScript数组选择选项
- 当html选择/选项发生更改时,需要更新输入字段
- 使用javascript和html选择第二个选项后发出警报
- javascript函数将当前时间显示为html选择标记的预选值
- laravel5.0中HTML选择标记的动态选择
- jQuery将输入集中在下一个tr->td时,td包含一个输入字段,但从不关注html选择
- 基于's是在HTML选择框中选择的
- 如何使用Angular 2设置HTML选择值
- 在html选择中显示AJAX成功JSON值
- 使用 jQuery 增加 HTML 选择框的大小属性
- 当我认为它不应该重新渲染视图时,如何防止 Meteor 在 html 选择 dom 单击事件上重新渲染视图
- HTML 选择元素的只读等效项
- 如何使 html 选择选项在 Meteor 中工作
- 当“不相关”的 html 选择元素没有选择任何选项时,如何退出 jQuery 事件
- HTML选择:将默认值设置为给定值,而不是从选项列表中选择
- html选择-范围为0-10
- 是否可以在HTML选择下拉菜单的每个选项上附加一个qtip2工具提示