JQuery 遍历 JSON 数组并插入动态 HTML SELECT

Question

对于我的一生，我不知道为什么这不起作用 - 我尝试了多种方法来尝试将 JSON 数据插入到 <option> 代码中，每次它不起作用 - 它仅输出 HTML 文本，而不是在 <select> 下拉列表中

$.getJSON( "group.asp", function( data ) {
    $('#msgBox').html($('#msgBox').html() + '<div class="table-row"><div class="table-col-l">Name:</div><div class="table-col-r"><select id="name1"><option>SELECT</option>')
    $(data).each(function(index, element) {
        console.log(element)
        $('#msgBox').html($('#msgBox').html() + '<option>'+element.name+'</option>');
    });
    $('#msgBox').html($('#msgBox').html() + '</select></div></div>')
})

我尝试将它创建为一个单独的变量，插入到 .each 函数之后，但这也不起作用。

Answer 1

在使用.html()之前尝试进行正确的字符串连接，

$.getJSON( "group.asp", function( data ) {
    var str = $('#msgBox').html();
    str += '<div class="table-row"><div class="table-col-l">Name:</div><div class="table-col-r"><select id="name1"><option>SELECT</option>';
    $(data).each(function(index, element) {
        str += '<option>'+element.name+'</option>';
    });
    str += '</select></div></div>';
    $('#msgBox').html(str);
})