如何动态显示json数组元素到选择标签
how to display json array elements dynamically into select tag?
我有一个JSON数组,格式如下
"StoreName":["10001 Main ST","10002 Part1","10004 MyStore1","10005 M STR", "10008 Centro","10009 MyStore 02","1001 G","1001 H","10010 Store main ROAD","10011 Central M Store","10012 En Department","10013 M Station","10014 Test Center","10015 SubStore1","10016 AA","10018 M part #","10019 Test A - 26032016","1002 B","1002 I","10020 Test Central B "]
我必须访问它的每个元素并将其显示为select标签中的选项
<select id ="storeNm" name="name">
<option>--Select--</option>
<option>---Here store name list contents---</option>
<option>---Here store name list contents---</option>
</select>
我是JSON的新手,必须使用javascript/jQuery,所以任何帮助/指导将不胜感激。
使用Array#map
方法迭代并生成元素。其中元素可以使用jQuery生成。
var data = {
"StoreName": ["10001 Main ST", "10002 Part1", "10004 MyStore1", "10005 M STR", "10008 Centro", "10009 MyStore 02", "1001 G", "1001 H", "10010 Store main ROAD", "10011 Central M Store", "10012 En Department", "10013 M Station", "10014 Test Center", "10015 SubStore1", "10016 AA", "10018 M part #", "10019 Test A - 26032016", "1002 B", "1002 I", "10020 Test Central B "]
};
// create select tag
$('<select/>', {
// set id of the element
id: 'storenm',
// generate html content by iterating over array
html: data.StoreName.map(function(v) {
// generate option with value and text content
return $('<option>', {
text: v,
value: v
});
})
// append the generated tag to body
}).appendTo('body');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
相关文章:
- 你能从另一个页面中选择标签吗
- 调用函数单击选择标签中的选项
- 使用 jQuery 从选择标签中抓取文本
- 使用 jQuery(移动)更新多个选择标签
- 如何使用 JavaScriptJQuery 将隐藏输入标签的值与选择标签的选定选项的值进行设置
- jQuery Tag-It – 如何在选择标签时自动显示自动完成列表
- ng-model 绑定到选择标签生成的空默认值
- 单击“选择标签”中的“选项”时创建,然后选中“值”创建输入
- 选择2个选择标签后启用按钮
- 如何使用 queryselectorAll() 选择
- 如何从“选择”标签中获取所选项目
- 如何通过 innerHTML 设置选择标签选项
- 如何自动递增选择标签中的日期
- 轨道:填充表单中选择标签的输入
- 选择标签似乎搞砸了我的 CSS
- 在下拉列表中显示保存的数据 - html 选择标签
- AngularJS:在不修改ng模型的情况下获取选择标签
- 没有“选择”标签的组合框实现
- 如何使用 JavaScript 访问表单选择标签的 value 属性的内容或其内部文本
- 如何使用 JavaScript 或 CSS 更改选择标签中的选项宽度