6

所以，这就是交易：我有一个 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从数据中将项目添加到这个选择标签，并且选项值具有来自数据的 CODE。所以，我期望发生的是：

<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 新手。

谢谢！

4

6 回答 6

11

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

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

这是一个工作小提琴。

于 2013-12-10T13:57:19.037 回答
8 
$.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));
        });
    }
});
于 2013-12-10T14:11:02.770 回答
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);
于 2013-12-10T13:56:16.913 回答
1

开始时，您可以从w3schools了解更多关于 JavaScript 的知识。有一个名为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
于 2013-12-10T14:10:01.813 回答
1

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

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

或者使用json2html的jquery 插件

var jsonData = $.parseJSON(window.localStorage.getItem("data"));
var transform = {tag:'option', id:'${CODE}',html:'${NAMEVAR}'};
$('#mySelectID').json2html(jsonData,transform);
于 2013-12-12T23:07:29.610 回答
-1

您最需要立即更改此设置：

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}" 来转换为它，它不会自动执行此操作。

祝你好运！

于 2013-12-10T14:01:42.417 回答