如何从JSON哈希创建HTML选择选项
How to create HTML select option from JSON hash?
我有一个简单的JSON代码:
[{'1':'Name'}, {'2', 'Age'}, {'3','Gender'}]
我的HTML中有一个选择标签:
<select name="datas" id="datas"></select>
我需要一种简单的方法来从这个JSON创建HTML选择框,如下所示:
<select name="datas" id="datas">
<option value="1">Name</option>
<option value="2">Age</option>
<option value="3">Gender</option>
</select>
这里有一个纯javascript的答案,而且你可能不需要数组,只要一个简单的对象就足够了
<select name="datas" id="datas"></select>
<script>
html = "";
obj = {
"1" : "Name",
"2": "Age",
"3" : "Gender"
}
for(var key in obj) {
html += "<option value=" + key + ">" +obj[key] + "</option>"
}
document.getElementById("datas").innerHTML = html;
</script>
试试这个。
//Correct(missing colons) in the array items
var data = [{'1':'Name'}, {'2': 'Age'}, {'3': 'Gender'}];
创建option
元素,然后使用append
方法将它们附加到select元素中。
var $select = $('#datas');
$.each(data, function(i, val){
$select.append($('<option />', { value: (i+1), text: val[i+1] }));
});
演示
上面的答案假设数组的数据索引是有序的。如果数据变量是:
var data = [ {'23':'Age'}, {'12':'Gender'}, {'3':'Name'}];
按字母顺序排列,但带有随机id。
我发现解决这个问题的一种方法是:
$.each(data, function(key, value) {
var i = Object.keys(value)[0];
$("select#datas").append( $("<option />").val(i).text(value[i]) );
相关文章:
- 从动态创建的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工具提示