从 JSON 中插入 HTML 选择标签选项答案

【问题标题】：Insert into HTML select tag options from a JSON从 JSON 中插入 HTML 选择标签选项
【发布时间】：2013-12-28 01:44:03
【问题描述】：

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

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

数据保存如下：

[{"NAMEVAR":"Some Data 1","CODE":"1"},{"NAMEVAR":"Some Data 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 新手。

谢谢！

【问题讨论】：

标签： javascript jquery html json json2html

【解决方案1】：

我认为您的代码中有几个错误。试试这个：

// it's class, not id, and no fullstop required.
// The $ sign was in the wrong place.
var transform = {tag:'option', class:'$(CODE)', html:'${NAMEVAR}'};

// it's innerHTML not innerHtml
document.getElementById('mySelectID').innerHTML = json2html.transform(jsonData, transform);

【讨论】：

【解决方案2】：

您不需要为此进行转换，请尝试以下方式：

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。

【讨论】：

【解决方案3】：

您最需要立即更改：

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

到这里：

var jsonData = $.parseJSON(window.localStorage.getItem("MyData"));
var transform = {tag:'option', id:'{$CODE}',html:'{$NAMEVAR}'};

这只是获取数据的密钥，因此请确保使用相同的密钥。

渲染可能有些困难：

value="1"

因为您依赖 id="{$CODE}" 来翻译，它不会自动执行。

祝你好运！

【讨论】：

投反对票的人能否解释一下他投反对票的原因？ :O

【解决方案4】：

当您开始学习 JavaScript 时，您可以从 w3schools 了解更多。有一个名为 Element 的 DOM 对象，您可以使用它在 select 中添加一个选项。您只需要执行以下操作：

var el = document.getElementById('mySelectID'); //Get the select element
var opt = document.createElement('option'); //Create option element
opt.innerHTML = "it works!"; //Add a value to the option

el.appendChild(opt); //Add the option to the select element

【讨论】：

【解决方案5】：

$.ajax({
    url:'test.html',
    type:'POST',
    data: 'q=' + str,
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {
           $('#myselect').append($('<option>').text(value).attr('value', value));
        });
    }
});

【讨论】：

纯代码答案在 Stackoverflow 上的价值很低，因为它们对教育/授权成千上万的未来研究人员几乎没有作用。请始终解释您的解决方案是如何工作的，以及为什么它是一个有益于未来研究人员的好主意。

【解决方案6】：

回答有关如何在 json2html 中执行此操作的实际问题 .. 使用正确的转换

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

或者将jquery plugin 用于json2html

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

【讨论】：