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

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

或者使用json2jtml的jquery插件

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}”來翻譯，它不會自動執行。

祝好運！