从JSON插入HTML select标签选项

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

这是一个工作小提琴.

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