javascript - 将选定的下拉菜单值传递到第二个函数

Question

我有一些代码来生成一个下拉菜单，其内容来自一个数组。那部分正在工作。但是，当用户单击菜单元素之一时，我需要将从下拉菜单中选择的值传递到我的 populateJobVal() 函数中 - 以便该值将打印到输入字段。现在，当我运行此代码时，打印到输入字段的内容是 [object HTMLUListElement]。

我假设我在这里需要做的就是将正确的值传递给我的 populateJobVal()，但是，到目前为止它还没有按预期工作。我尝试按如下方式调整代码:

a.setAttribute('onclick', 'populateJobVal(opt)');

...但是，在这种情况下，没有任何内容打印到输入字段。我需要在这里传递什么？或者我错过了什么？

  <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 a = document.createElement("a");
      a.textContent = opt;
      a.setAttribute('href', '#');
      a.setAttribute('onclick', 'populateJobVal(selectJob)'); // What to pass here?
      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;
    }

  </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">
    </ul>
  </div>

Answer 1

我更改了添加点击事件的方式，更容易传递 opt 参数。以前传递整个列表的方式。

替换

a.setAttribute('onclick', 'populateJobVal(opt)'); 

与

 a.addEventListener('click', () => {
    populateJobVal(opt)
 }); // Look here

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.addEventListener('click', () => {
    populateJobVal(opt)
  }); // Look here
  a.setAttribute('class', 'btn btn-link');
  let li = document.createElement("li");
  li.appendChild(a);
  select.appendChild(li);
}

function populateJobVal(val) {
  debugger
  document.getElementById("selectJob").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>