如何从 JSON 哈希创建 HTML 选择选项？答案

【问题标题】：How to create HTML select option from JSON hash?如何从 JSON 哈希创建 HTML 选择选项？
【发布时间】：2012-01-30 22:07:11
【问题描述】：

我有一个简单的 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>

【问题讨论】：

一些提示：foreach()、document.createElement() 和 .appendChild()。

标签： javascript jquery json option

【解决方案1】：

只是为了踢，这是纯 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>

【讨论】：

key 和 obj[key] 至少应该正确编码。想象一下如果obj = {"1" : "> one &","2":"This has a quote \" in it"}。使用 .append 生成它比加入 html 字符串更安全

【解决方案2】：

试试这个。

//Correct(missing colons) in the array items
var data = [{'1':'Name'}, {'2': 'Age'}, {'3': 'Gender'}];

创建option 元素，然后使用append 方法将它们附加到选择元素中。

var $select = $('#datas');
$.each(data, function(i, val){
    $select.append($('<option />', { value: (i+1), text: val[i+1] }));
});

Demo

【讨论】：

【解决方案3】：

上面的答案假设数组的数据索引是有序的。如果数据变量是：

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]) );

【讨论】：