如何在表格中创建多选项动态下拉列表？

Question

我正在尝试制作一个动态多选选项下拉菜单。下拉列表中选项元素的文本来自我正在获取的数据库。我希望表中的每一行的最后一列都包含这个多选选项下拉菜单。现在，结果是它跳过每一行，并且仅在最后一行显示所有选项多次（与行数一样多）。因此，不是在每一行中显示，而是每一行都是空的，除了最后一行，并且值都显示在最后一行中。此外，奇怪的是它在表格的右侧创建了空白区域，就像它创建新列一样。我附上了一张图片来帮助形象化。

如何在每一行中正确显示选项以及如何使其成为多选下拉列表，如果用户单击其中一个选项，该选项将添加到影响区域部分。

谢谢。

图片：Image of how it currently looks

Javascript：

//Get Resources and corresponding information and display it in a table
function getResources(){
fetch("______", {
}).then(data => {

var table = document.getElementById("productivity-table");

for(var i=0; i < data.length; i++){
  var row = table.insertRow(table.rows.length - 1);
  var cell3 = row.insertCell(2);

  cell3.classList.add("table-data");

  //Cell3 - Create ul and li
  var impact_ul = document.createElement("ul");
  var impact_li = document.createElement("li");
  impact_li.innerHTML = data[i].entity;
  impact_li.setAttribute("style", "list-style-type:none");

  //Add delete button row
  var delete_span = document.createElement("span");
  delete_span.className = "delete";
  delete_span.innerHTML = "&times;"
  impact_li.appendChild(delete_span);

  impact_ul.appendChild(impact_li);
  cell3.appendChild(impact_ul);

  //Cell5 - Create department dropdown
  var dep_dropdown = document.createElement('select'); 
  console.log("dep dropdown", dep_dropdown); 

  //dep_dropdown.length = 0;
  let dep_default = document.createElement('option');
  dep_default.text = 'Select Department';
  dep_default.disabled = true;
  dep_dropdown.add(dep_default);
  dep_dropdown.selectedIndex = 0;

  fetch("______", {
    }).then(data =>{

      for(var i=0; i < data.length; i++){
        var cell5 = row.insertCell(4);
        cell5.classList.add("table-data");
        var dep_option = document.createElement('option');
        dep_option.text = data[i].dept_name;
        dep_option.value = data[i]._id;
        dep_dropdown.appendChild(dep_option);
        cell5.appendChild(dep_dropdown);
      }
       
    }).catch(function(err) {
    console.log('Fetch problem: ' + err);
    });

}        
})
}

Answer 1

这是你要求的看一下sn-p

window.onload = function() {
  var data = ["option1", "option2", "option3", "option4"];
  var table = document.getElementById("productivity-table");

  function addslct(dep_dropdown) {
    dep_dropdown = document.createElement('select');
    dep_dropdown.size = "3";
    dep_dropdown.className = "dep_select";
    dep_dropdown.id = 'selection';
    dep_dropdown.name = 'data options';
    dep_dropdown.multiple = "multiple";
    dep_dropdown.style.position = "relative";
    dep_dropdown.style.width = "100%";
    dep_dropdown.style.textAlign = "center";
    dep_dropdown.style.color = "darkblue";
    return dep_dropdown;
  }

  function addopts(data) {
    var slcts = document.getElementsByClassName('dep_select');
    for (var i = 0; i < slcts.length; i++) {
      for (var a = 0; a < data.length; a++) {
        slcts[i].options.add(optns(data[a], data[a]));
      }
    }
  }

  function optns(option, oname) {
    var option = document.createElement('option');
    option.Value = option;
    option.textContent = oname;
    return option;
  }
  table.rows[0].innerHTML += "<th>4</th>";
  for (var i = 1; i < table.rows.length; i++) {
    var newell = table.rows[i].cells.length;
    table.rows[i].insertCell(newell);
    table.rows[i].cells[table.rows.length - 1].appendChild(addslct());
  }
  addopts(data);
  document.querySelectorAll('.dep_select').forEach(selectedOptions => {

    selectedOptions.addEventListener('click', function() {

      var col2 = this.options;
      for (var o = 0; o < col2.length; o++) {
        var o2 = col2[o];
        if (o2.selected == true) {
       var rwi = this.parentNode.parentNode.rowIndex; 
       var cli = this.parentNode.cellIndex;
       var cell2 = table.rows[rwi].cells[cli-2];
       var slctdopt = o2.value;
       if (cell2.innerText.includes(slctdopt) == true) {
       var excludez = cell2.innerText.replace("[ "+ slctdopt +" ]", "");
       cell2.innerText = excludez + " [ " + slctdopt +" ]";
       //cell2.innerText += " [ " + slctdopt +" ]";
       } else {
       excludez = slctdopt;
       cell2.innerText += " [ "+ excludez +" ]";
       }
       }
       }
    });
  });
}

#productivity-table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#productivity-table td,
#productivity-table th {
  border: 1px solid #ddd;
  padding: 8px;
}

#productivity-table td {
  text-align: center;
  color: blue;
  margin: auto;
  width:20%;
}

#productivity-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

#productivity-table tr:hover {
  background-color: #ddd;
}

#productivity-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
}

<table class="table1" id="productivity-table">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>first</td>
    <td></td>
    <td>third</td>
  </tr>
  <tr>
    <td>first</td>
    <td>[ option2 ]</td>
    <td>third</td>
  </tr>
  <tr>
    <td>first</td>
    <td>[ option3 ]</td>
    <td>third</td>
  </tr>
</table>