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

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

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

这是api的预期输出

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

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

现在列表最初仍然显示

undefined

，但如果我单击它，它将显示预期的下拉列表

这是否意味着API有问题？但是我可以在控制台中看到从API获得的数据，而不是：

let $boardingOption = $("<option>" + value + "</option>");

你错过了一个引号，应该是：

$（“#boardingDropdown”）

---

最后，根据我的更正，应该是：

$("#boardingDropdown").append(boardingOption);

而不是：

let $boardingOption = $("<option>" + value + "</option>");

你错过了一个引号，应该是：

$（“#boardingDropdown”）

---

最后，根据我的更正，应该是：

$("#boardingDropdown").append(boardingOption);

尝试以下解决方案：

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

$。每个（项目、功能（i、值）{
$（'#boardingDropdown'）。追加（$（''，{
value:value\u value，
text:text\u值
}));
});

输出应如下所示：

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

文本值

尝试以下解决方案：

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

$。每个（项目、功能（i、值）{
$（'#boardingDropdown'）。追加（$（''，{
value:value\u value，
text:text\u值
}));
});

输出应如下所示：

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

文本值

发现问题：

我已将id指定给标记，并正在将选项添加到此标记

 <select title="Select pickup city"  id="boardingDropdown">
    
 </select>

相反，我所做的是在标记上方创建一个标记，然后从jquery追加

<div>
    <label>Boarding Point </label>
        <div id="boardingDropdown"></div>
</div>

登机点

然后在jquery中，我还添加了标记：

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

$.getJSON（busApi，函数（boardingPoints）{
让opt=''；
$。每个（边界点、功能（索引、值）{
opt+=''+值+''；
});
opt+='发现问题：

我已将id指定给标记，并正在将选项添加到此标记

 <select title="Select pickup city"  id="boardingDropdown">
    
 </select>



相反，我所做的是在标记上方创建一个标记，然后从jquery追加

<div>
    <label>Boarding Point </label>
        <div id="boardingDropdown"></div>
</div>


登机点

然后在jquery中，我还添加了标记：

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

$.getJSON（busApi，函数（boardingPoints）{
让opt=''；
$。每个（边界点、功能（索引、值）{
opt+=''+值+''；
});
opt+='非常感谢您的回答，但这并没有起作用。列表仍然显示未定义。而引号的输入错误仅存在于这个问题中，我已更正。您的$中的值。每个函数在附加到选择列表时都没有返回值，请使用开发人员工具在浏览器中检查，然后放置断点s检查您的参数“值”确实有一个值或其未定义的值。我在问题中已经说过，我可以在控制台中打印这些值，但它们在下拉列表中不可见。非常感谢您的回答，但这不起作用。列表中仍然显示未定义的值。而引号的键入仅在这个问题中，我已更正。您的值在your$中。每个函数当它附加到选择列表时，tion没有返回值，请使用开发人员工具在浏览器中检查，并放置断点以检查您的参数“value”是否确实有值或其未定义。我在问题中已经说过，我可以在控制台中打印值，但它们在下拉列表中不可见。写入
$(“#boardingDropdown”）.length
在console.log中，结果是什么？@A.R.sei如果答案显示1在日志中‍‍‍‍‍‍‍‍‍<代码>$。每个‍‍‍？我测试了内部和外部$。每个。它在两个位置都显示1。使用就绪列表测试。结果是什么？示例[1,2,3,4,5,6]a write
$（“#boardingDropdown”）。console.log中的长度
，结果是什么？@a.R.sei如果答案显示1是内部日志‍‍‍‍‍‍‍‍‍<代码>$。每个‍‍‍？我测试了内部和外部$。每个。它在两个位置都显示1。使用就绪列表测试。结果如何？示例[1,2,3,4,5,6]您的解决方案表示未捕获引用错误：控制台中未定义值和文本值。您必须将值和文本值替换为变量名称。在您的情况下，仅为“值”。示例：$。每个（items，function（i，value）{$（'#boardingDropdown'）。append（$（''，{value:value，text:value}））；}）；您的解决方案表示未捕获引用错误：控制台中未定义value_值。您必须将value_值和text_值替换为变量名称。在您的情况下，仅为“value”。示例：$。每个值（items，function（i，value）{$（'#boardingDropdown'）。append（$（''，{value:value，text:value}））；}）；有比这个更好更干净的方法。如果你想知道，请告诉我-我会发布答案我的解决方案有帮助吗？有比这个更好更干净的方法。如果你想知道-我会发布答案我的解决方案有帮助吗？