jquery - 从 json 响应填充下拉列表

Question

我想用 json 数据填充我的下拉列表。

<select id="selectSkill"><option>Choose a skill</option></select>

我有以下格式的json:

[
  {
    "SkillID": "100",
    "SkillName": "301 - COMCAST"
  },
  {
    "SkillID": "36",
    "SkillName": "303 - COX"
  },
]

如果是普通数组，我会这样做:

var array= ["1", "2", "3", "4", "5"];
$.each(array, function (i, p) {
$('#selectSkill').append($('<option></option>').val(p).html(p));

如何填充下拉列表以将 SkillID 设置为值，并将 SkillName 设置为下拉列表的文本？

Answer 1

你可以这样做:-

$.each(array, function (i, p) {
  $('#selectSkill').append($('<option></option>').val(p.SkillID).html(p.SkillName));
});

工作示例:-

array =[
  {
    "SkillID": "100",
    "SkillName": "301 - COMCAST"
  },
  {
    "SkillID": "36",
    "SkillName": "303 - COX"
  },
];

$.each(array, function (i, p) {
  $('#selectSkill').append($('<option></option>').val(p.SkillID).html(p.SkillName));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectSkill"></select>