javascript - 使用 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>元素。应该去别的地方吗？我确实尝试将“id”放在 <li> 上元素，但这使得所有数组元素成为一个可点击字段，而不是每个元素都可点击。

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

我需要在代码中编辑哪些内容才能使每个元素成为可点击的链接？

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>