獲取選定的下拉菜單值以傳遞到第二個 Function

Question

我有一些代碼可以生成一個下拉菜單，其內容來自一個數組。 那部分正在工作。 但是，當用戶單擊其中一個菜單元素時，我需要將從下拉菜單中選擇的值傳遞給我populateJobVal() function - 這樣該值就會打印到輸入字段中。 現在，當我運行此代碼時，打印到輸入字段的是[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>