jQuery在json的select下拉列表中追加选项

$.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']
                }));
            });
        });

Can anybody tell why this code is not working? It does not append any options in my select html output. Console works just fine.

任何人都可以告诉为什么这段代码不起作用？它不会在我的select html输出中附加任何选项。控制台工作正常。

HTML code:

HTML代码：

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

JSON file:

JSON文件：

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

]
enter code here

EDIT:

编辑：

It appending options in the first select element that jQuery selector finds. However I have several same select element in the html. How to target them all?

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

3 个解决方案

#1

Your code works well for me.

你的代码适合我。

I had wrong characters for the Åland Islands in the dropdown list, so I had to re-save the JSON file, changing from ANSI to UTF-8.

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

#2

Your jQuery each function and the formatting of your appear option is not correct.

你的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);
  });

Update

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

#3

It appending options in the first select element that jQuery selector finds. However I have several same select element in the html. How to target them all?

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

If you've reused the same id attribute then your HTML is invalid, and jQuery will find only the first (as you've seen).

如果您重复使用相同的id属性，那么您的HTML无效，jQuery将只找到第一个（如您所见）。

It is valid to give multiple elements the same name attribute, so if your elements all have name="ppState" then you can select by that:

赋予多个元素相同的名称属性是有效的，因此如果您的元素都具有name =“ppState”，那么您可以选择：

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

Or you can add a common class to each element:

或者您可以为每个元素添加一个公共类：

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

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