时间戳

首页 > 解决方案 > 如何使用 JQuery 动态更新下拉列表？

javascript - 如何使用 JQuery 动态更新下拉列表？

问题描述

我有一个最初为空的下​​拉列表：

 <div>
  <label>Boarding Point </label>
        <select title="Select pickup city"  id="boardingDropdown">
        
        </select>
</div>

我想从 API 获得的 json 数据更新它。我可以在控制台中打印从 API 获得的数据，但我无法使用 jquery 将其添加到下拉列表中。

这是我的jQuery代码

$.getJSON(busApi, function(boardingPoints) {
            $.each(boardingPoints, function(index, value){
                let $boardingOption = $("<option>" + value + "</option>");
                $("#boardingDropdown").append($boardingOption);
            });
        });

下拉列表只显示undefined没有任何其他数据。

我尝试过其他类似的问题（例如this和this），但它们并没有解决我的问题。

有人可以告诉我我做错了什么吗？

谢谢。

编辑：

console.log(value) 显示输出

Kathmadnu
Birgunj
Pokhariya
Langadi Chowk
Bhiswa
Birgunj

这是 api 的预期输出。

我用这些数据创建了一个列表

let buses=["Kathmadnu",
            "Birgunj",
            "Pokhariya",
            "Langadi Chowk",
            "Bhiswa",
            "Birgunj"
          ];

现在列表仍然undefined最初显示，但如果我点击它，它会按预期显示下拉列表。

这是否意味着API有问题？但是我可以在控制台看到从API获取的数据吗？

标签： javascripthtmljqueryajax

解决方案

试试这个解决方案：

$.each(items, function (i, value) {
    $('#boardingDropdown').append($('<option>', { 
        value: value_value,
        text : text_value 
    }));
});

输出应该是这样的：

<select title="Select pickup city" id="boardingDropdown">
  <option value="value_value">text_value</option>
</select>

推荐阅读