从JSON选择下拉列表中的jQuery追加选项

Question

$.getJSON('js/countries.json', function (data) {
            $.each(data, function (i=0,name,code) {
                // console.log(data[i]['name'] + '=' + data[i]['code']);
                $('#ppState').append($('<option>', {
                    value: data[i]['code'],
                    text: data[i]['name']
                }));
            });
        });

谁能告诉我为什么此代码不起作用？ 它不会在我的选择html输出中附加任何选项。 控制台工作正常。

HTML代码：

<select id="ppState" name="ppState">
    <option value="">Choose Country</option>
</select>

JSON文件：

[
  {
    "name": "Afghanistan",
    "code": "AF"
  },
  {
    "name": "Åland Islands",
    "code": "AX"
  },
  {
    "name": "Albania",
    "code": "AL"
  }

]
enter code here

编辑：

它将选项添加到jQuery选择器找到的第一个select元素中。 但是我在html中有几个相同的select元素。 如何针对所有目标？

Answer 1

您的jQuery每个函数和外观选项的格式不正确。

// yours.......
$.each(data, function (i=0,name,code) {
                // console.log(data[i]['name'] + '=' + data[i]['code']);
                $('#ppState').append($('<option>', {
                    value: data[i]['code'],
                    text: data[i]['name']
                }));
            });


// should
$.each(data, function (item) {
    var opt = $('<option></option>');

    opt.val(item.code);
    opt.text(item.name);

    $('#ppState').append($(opt);
  });

更新资料

$.each(data, function (item) {
    $('#ppState').append($('<option value="' +item.code+ '">' +item.name+ '</option>'));
  });

Answer 2

您的代码对我来说效果很好。

下拉列表中的奥兰群岛字符错误，因此我不得不重新保存JSON文件，从ANSI更改为UTF-8。

Answer 3

它将选项添加到jQuery选择器找到的第一个select元素中。 但是我在html中有几个相同的select元素。 如何针对所有目标？

如果您重复使用了相同的id属性，则您的HTML无效，并且jQuery将仅找到第一个（如您所见）。

为多个元素赋予相同的name属性是有效的，因此，如果所有元素都具有name="ppState"则可以通过以下方式进行选择：

$('select[name="ppState"]').append(...

或者，您可以向每个元素添加一个通用类：

<select id="ppState" name="ppState" class="state">

$('select.state').append(...

Answer 4

我希望这可以帮助您附加

我在Spring Boot MVC中使用的这些代码

JSON数据

[{"name":"Afghanistan","code":"af"},
{"name":"Albania","code":"al"},
{"name":"Algeria","code":"dz"}]

jQuery代码

var jsonData = '${restData}';
var obj = JSON.parse(jsonData);
for (i in obj) {
    $('#selectList').append(new Option(obj[i].name, obj[i].code));

}