Javascript 在HTML中插入JSON中的选择标记选项

所以，这里有一个交易：我在localStorage的web应用程序中保存了一个JSON对象。 此JSON将保存为字符串，在页面加载时，在我的一个函数中使用JSON.stringify：

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

数据的保存方式如下：

[{NAMEVAR:somedata1，CODE:1}，{NAMEVAR:somedata2，CODE:2}]

数据是请求的结果。数据已成功保存在主页上，因此我可以稍后使用。在那之后，我必须在另一个页面上加载一个表单，使用我从数据中得到的信息

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

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

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

---

谢谢

我认为您的代码中有几个错误。请尝试以下方法：

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

---

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

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

---

这是一个工作模式。

您最需要立即更改的是：

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}来转换为它，而它不会自动执行

---

祝你好运

开始时，您可以从中了解更多JavaScript。有一个名为的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

---

回答如何在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的

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

---

被否决的选民能解释他为什么否决这个吗只有OCode的答案在Stackoverflow上价值很低，因为它们对未来数千名研究人员的教育/授权作用甚微。请始终解释您的解决方案是如何工作的，以及为什么这是一个有益于未来研究人员的好主意。

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

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

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