使用JavaScript从数组填充下拉菜单

Question

我需要通过JavaScript从数组中动态生成一个下拉菜单列表。我已经接近了，但虽然我可以将数组元素填充到index.html页面上显示的启用Bootstrap的下拉菜单中，但我无法选择那些显示为下拉菜单项的单个元素。我需要编辑我的代码，这样我就可以点击其中一个元素并运行我的第二个函数，该函数将选择填充到输入字段中。

首先，这里是我在数组上迭代的脚本：

<script>
let select = document.getElementById("selectJob");
let options = ["Job 1", "Job 2", "Job 3", "Job 4", "Job 5"];
for (let i = 0; i < options.length; i++) {
let opt = options[i];
let el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
</script>

这是我使用的第二个脚本：

<script>
function populateJobVal(val) {
document.getElementById("selection").value = val;
}
</script>

这是我HTML中的下拉菜单部分，我正试图在其中使用：

<div class="dropdown">
<button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Job Type to Schedule
<span class="caret"></span></button>
<ul class="dropdown-menu" id="selectJob">
<li>
<a href="#" role="button" onclick="populateJobVal(selectJob)" class="btn btn-link">
</a>
</li>
</ul>
</div>

请注意，我正在将"id"添加到<ul>元素中。它应该去别的地方吗？我确实尝试在<li>元素上加上"id"，但这使所有数组元素都成为一个可点击的字段，而不是每个元素都可点击。

现在，当我点击下拉菜单按钮时，会出现不同的作业。但是，它们不能单独点击。

我需要在代码中编辑什么才能使每个元素都成为可点击的链接？

Answer 1

要匹配模板，您需要执行以下操作：

let select = document.getElementById("selectJob");
let options = ["Job 1", "Job 2", "Job 3", "Job 4", "Job 5"];
for (let i = 0; i < options.length; i++) {
let opt = options[i];
let a = document.createElement("a");
a.textContent = opt;
a.setAttribute('href', '#');
a.setAttribute('onclick', 'populateJobVal(selectJob)');
a.setAttribute('class', 'btn btn-link');
let li = document.createElement("li");
li.appendChild(a);
select.appendChild(li);
} 

function populateJobVal(val) {
document.getElementById("selection").value = val;
}

<div class="dropdown">
<button class="btn btn-default btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Job Type to Schedule
<span class="caret"></span></button>
<ul class="dropdown-menu" id="selectJob">
</ul>
</div>