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

}