[ANSWERED] javascript – How can I create a multi-option dynamic dropdown in a table?

Question 1

here is what you asked for take alook on the snippet

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>

Question 2

I am trying to make a dynamic multi-select option dropdown. The text for the options element in the dropdown are coming from a database that I am fetching. I want each row in the table to have the last column contain this multi-select option dropdown. Right now, the result is it’s skipping every row and only on the last row is it displaying all the options multiple times (as amount of times as there are rows). So instead of showing in each row, every row is empty expect the last one and the values are all being showed in the final row. Also, strangely it created empty white space on the right side of the table, like it make new columns. I have attached an image to help visualize this.

How do I display the options properly in each row and how do I make it a multi select dropdown, where if the user clicks one of the options, that option is added to the impact area section.

Thanks.

Image: 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);
    });

}        
})
}

Bollate

[ANSWERED] javascript – How can I create a multi-option dynamic dropdown in a table?

By

Solution 1 :

Problem :

Comments

Comment posted by stackoverflow.com/questions/27673937/…

By

Related Post

[ANSWERED] problem in selecting list item in html/css

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – Trying to align a div to the right using CSS

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate