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

有人能说出为什么这段代码无效吗？它不会在我的select html输出中附加任何选项。控制台工作得很好。

HTML code：

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

}

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

4 个答案:

更新