Question

我正在从JSON文件构建一些Html。

问题是我需要用json文件中的内容填充选择框。我从论坛尝试了几个解决方案，但无法让它发挥作用。我认为它与附加内容有关，因为我还有不同的html正在构建。

我拥有的是：

$.getJSON(url, function (data){ 
........ etc
quickCartHtml += '<form id="variants" action=""><select id="options" name="option">';


var options = '';

  $.each(product.variants, function (index, variant) {

  options += '<option value="' + variant.id + '" />' + variant.title + '</option>';

  });  

$('#options').append(options);

quickCartHtml += '</select></form>';

当我使用console.log时，一切似乎都有效。因此，我认为我在附加到quickCartHtml时出错了。

有人提出建议吗？

Answer 1

尝试：

$('#options').html(options);

Answer 2

您的问题是，当您调用追加时，<select>尚未构建，因此您需要继续添加变量然后附加整个内容：

$.getJSON(url, function (data) {........etc
    quickCartHtml += '<form id="variants" action=""><select id="options" name="option">';


    // unnecessary
    // var options = '';

    $.each(product.variants, function (index, variant) {

        quickCartHtml += '<option value="' + variant.id + '" />' + variant.title + '</option>';

    });

    // $('#options').append(options);

    quickCartHtml += '</select></form>';

    // now append quickCarthtml to a div or something
    $('div').append(quickCartHtml);

Answer 3

你必须先添加quickCartHtml才能选择可以这样做的#options：

$（ '＃靶'）附加（quickCartHtml）;

此外，您必须将生成的选项附加到#options，如下所示：

$ options = $（'＃options'）;

$。each（product.variants，function（index，variant）{
$options.append($('<option>', {value: variant.id, html: variant.title}));
}

Answer 4

好的，我找到了问题的答案，所以我发布这个是为了帮助其他人：

$.getJSON(url, function (data){ 
........ etc


options = '';

  $.each(product.variants, function (index, variant) {

  options += '<option value="' + variant.id + '">' + variant.title + '</option>';

  });  

 quickCartHtml += '<form id="variants" action=""><select id="options" name="option">'+options+'</select>';

选择包含json内容的框

4 个答案: