從數據列表中刪除下拉列表中的選定值

Question

到目前為止，我編寫的 html 和 javascript 會將一組值添加到由多個下拉列表引用的數據列表中。 如果這些下拉列表中的任何一個選擇了數據列表值之一，則將從數據列表中刪除它，直到不再選擇為止。 到目前為止，我只能對數組中的最終值進行這項工作。 我相信這與我正在使用的for()循環有關，但我無法弄清楚如何讓 javascript 檢查所有值而不會中斷。

HTML：

<div class="grid-cell">
        <input
          list="task"
          name="task-1"
          class="dropdown-box"
          id="task-1"
          placeholder="Select task or step"
        />
        <datalist id="task"></datalist>
</div>

JavaScript：

// Task List Array
let taskListSidewalks = new Array();
taskListSidewalks[0] = "Saw Cutting/Jackhammering";
taskListSidewalks[1] = "Concrete Debris Removal";
taskListSidewalks[2] = "Concrete Pouring";
taskListSidewalks[3] = "Stone Setting/Form";

// Populate Data-list From Array
function manageDataList() {
  let option = "";
  let dataList = document.getElementById("task");

  for (let i = 0; i < taskListSidewalks.length; i++) {
    option = document.createElement("option");
    option.setAttribute("id", `option-${i + 1}`);
    option.value = taskListSidewalks[i];
    dataList.appendChild(option);
  }
  // Remove Chosen Option
  const dropdowns = document.querySelectorAll(".dropdown-box");
  dropdowns.forEach(dropdown => {
    dropdown.addEventListener("input", () => {
      if (dropdown.value === option.value) {
        dataList.removeChild(option);
        console.log(dataList);
      }

      if (dropdown.value !== option.value) {
        dataList.appendChild(option);
      }
    });
  });
}

manageDataList();

Answer 1

好的，所以經過大量研究，無論出於何種原因，大多數瀏覽器似乎都不支持 HTML 數據列表標簽上的點擊事件。 所以下面是一個手動解決方法，通過在輸入標簽中使用單獨的 oninput function 來確定分配給輸入的值，然后。 我在 onInput function 中訪問該節點並將其從數據列表中刪除。

相關堆棧溢出鏈接在這里：

選項標簽上的 onclick 在 IE 和 chrome 上不起作用

單擊 HTML5 數據列表選項時執行操作

下面更新的代碼對我有用。

HTML：

<div class="grid-cell">
        <input
          list="task"
          name="task-1"
          class="dropdown-box"
          id="task-1"
          oninput="onInput()" <!-- See update here -->
        />
        <datalist id="task"></datalist>
</div>

JavaScript：

// Task List Array
let taskListSidewalks = new Array();
taskListSidewalks[0] = "Saw Cutting/Jackhammering";
taskListSidewalks[1] = "Concrete Debris Removal";
taskListSidewalks[2] = "Concrete Pouring";
taskListSidewalks[3] = "Stone Setting/Form";

// Populate Data-list From Array
function manageDataList() {
  let option = "";
  let dataList = document.getElementById("task");
  let optionList = new Array();

  for (let i = 0; i < taskListSidewalks.length; i++) {
    option = document.createElement("option");
    option.setAttribute("id", `option-${i + 1}`);
    option.value = taskListSidewalks[i];
    dataList.appendChild(option);
    optionList.push(option.value);
  } 
}

manageDataList();

// Manipulate datalist based on what is clicked.
function onInput() {
  const val = document.getElementById("task-1").value;
  const opts = document.getElementById("task").childNodes;
  const dataList = document.getElementById("task");

  for (var i = 0; i < opts.length; i++) {
        if (opts[i].value === val) {
          dataList.removeChild(opts[i]);
          console.log(dataList);
        };
  };
};