Question

所以，这是交易：我在localStorage的网络应用程序中保存了一个JSON对象。在页面加载中，此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标签添加项目，而选项值包含来自数据的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的新手。

谢谢！

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。

Answer 2

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

Answer 3

我认为您的代码中存在一些错误。试试这个：

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

Answer 4

在您开始时，您可以从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

Answer 5

使用正确的转换来回答关于如何在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);

Answer 6

大多数情况下你需要立即改变这个：

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}”来翻译，它不会自动完成。

祝你好运！

从JSON插入HTML select标签选项

6 个答案: