javascript - 从 JSON 插入 HTML 选择标签选项

Question

所以，事情是这样的:我在 localStorage 的网络应用程序中保存了一个 JSON 对象。 这个 JSON 被保存为一个字符串，带有 JSON.stringify，在我的一个函数中，在页面加载时:

localStorage.setItem("MyData", JSON.stringify(data));

数据是这样保存的:

[{"NAMEVAR":"一些数据 1","CODE":"1"},{"NAMEVAR":"一些数据 2","CODE":"2"}]

数据是请求的结果。数据已成功保存在首页，方便以后使用。之后，我必须使用从数据中获得的内容在另一个页面上加载表单。

我在页面上有这个选择标签:

<select id="mySelectID" name="select" class="main-form">
<option value="">None Selected</option>
</select>

我想做的很简单:我正在使用 json2html从数据中向此选择标签添加项目，并且选项值具有来自数据的代码。 所以，我期望发生的是:

<select id="mySelectID" name="select" class="main-form">
<option value="1">Some Data 1</option>
<option value="2">Some Data 2</option>
</select>

这样做:

var jsonData = $.parseJSON(window.localStorage.getItem("data"));
var transform = {tag:'option', id:'.CODE',html:'{$NAMEVAR}'};
document.getElementById('mySelectID').innerHtml = json2html.transform(jsonData,transform);

但这行不通，而且我知道这行不通。问题是我不知道如何将这个 JSON 插入到我的 HTML 的选项中。我认为 json2html 可以帮助我，但由于我的母语不是英语，所以我有点难以理解，而且我也是 JavaScript 的新手。

谢谢!

Answer 1

你不需要转换，试试这个:

var jsonData = $.parseJSON(window.localStorage.getItem("data"));

var $select = $('#mySelectID');
$(jsonData).each(function (index, o) {    
    var $option = $("<option/>").attr("value", o.CODE).text(o.NAMEVAR);
    $select.append($option);
});

这是一个有效的 fiddle .