使用javascript对象填充下拉列表

时间:2018-02-05 18:03:32

标签: javascript drop-down-menu

我正在尝试使用javascript对象填充下拉列表。我应该提一下,我从服务器端使用AJAX将这个javascript对象作为JSON响应。

     var fruits =
      {
        "1": {
              "id": 1,
              "Description": "Apple",
              "groupID": 0
             },
        "2": {
              "id": 2,
              "Description": "Peach",
              "groupID": 0
             }
      }

有人可以指示我这样做的链接吗?还是帮我解决这里的代码? 我目前在做什么

            dropdown1.options.length = 0;
            for (var i = 0; i < fruits.length; i++) {
                var option = document.createElement("OPTION");
                option.innerHTML = fruits[i].Description;
                option.value = fruits[i].id;
                dropdown1.options.add(option);}

但是所有内容都被打印为未定义。

1 个答案:

答案 0 :(得分:1)

我无法理解您的情况与the article I linked中提供的解决方案有何不同,但为了演示,我使用文章中的概念与原始代码相结合创建了一个解决方案。

&#13;
&#13;
var fruits =
{
  "1": {
        "id": 1,
        "Description": "Apple",
        "groupID": 0
       },
  "2": {
        "id": 2,
        "Description": "Peach",
        "groupID": 0
       }
};
var _select = document.createElement("select");
for (var key in fruits) {
  var fruit = fruits[key];
  _select.options[_select.options.length] = new Option(fruit.Description, fruit.id);
}

document.body.appendChild(_select);
&#13;
&#13;
&#13;