填充json响应的下拉列表

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了填充json响应的下拉列表相关的知识,希望对你有一定的参考价值。

我想用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设置为我的下拉列表的文本?

答案

你可以做:-

$.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>

以上是关于填充json响应的下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

每 2 秒刷新一次从 JSON 响应中填充的 listView

显示rest api json响应,如使用angular js的文本框自动填充

如何在 React 中用 JSON 数据填充下拉列表?

使用 json rereiver php mysql 在片段中填充列表视图

如何使用嵌套对象填充 Vue 下拉列表

如何根据我的代码和 JSON 响应对象显示下拉菜单列表?