Question

我正在使用nodejs / javascript做一个项目，我想用一些数组值填充组合框

 <label>Livro</label>
 <select id="comboLivros">
  </select>

但是我要放置数组的特定部分，即lista [i] .titulo

此表中的

function catalogo() {
//debugging para ver se foi pedido com sucesso
console.log(' pedido get  entrou success');
//criação de uma tabela para demonstração dos resultados recebidos
var txt = "";
txt += "<div class='table-responsive'>";
txt += "<table id='tblLivrosCatalogo' class='table table-sm'>";
txt += "<thead color:white '>";
txt += "<tr> <th>#ID</th> <th>Titulo</th> <th>Autor</th> <th>Género</th><th>Ano De Lançamento</th><th>Proprietário</th><th>Disponibilidade</th></tr></thead><tbody>";
//percorrer a variável data e por cada row cria a linha da tabela com os dados presentes
for (var i = 0; i < lista.length; i++) {
    if (lista[i].disp_req == "Disponivel") {
        // console.log(i)
        //aqui os id's são os do mysql
        txt += "<tr><td class='id_row"+i+"'>" + lista[i].id_livro + "</td><td>" + lista[i].titulo +
            "</td><td>" + lista[i].autor + "</td><td>" + lista[i].genero + "</td><td>" + lista[i].ano_lanc + "</td><td>" + lista[i].user_prop + 
            "</td><td>" + lista[i].disp_req + "</td><td>" + "<input  value='Requisitar' type='button' class='theButton' id='ma' rownr='" + i + "'>" + "</tr>"
    }
    else {
        //aqui os id's são os do mysql
        txt += "<tr><td  id ='id_tr'>" + lista[i].id_livro + "</td><td>" + lista[i].titulo +
            "</td><td>" + lista[i].autor + "</td><td>" + lista[i].genero + "</td><td>" + lista[i].ano_lanc + "</td><td>" + lista[i].user_prop + "</td><td>" + lista[i].disp_req + "</td></tr>"
    }
}
txt += "</tbody></table></div>";
//envia a tabela construida para a view e mostra o resultado (txt) no object com ID result
$("#tablecatalogo").html(txt);

}

当我在另一页中注册书籍并且我只想从数组lista中获取书籍名称以放入组合框时，将生成此表

Answer 1

(function () {
  var comboBox = document.querySelector('#combobox'),
      table = document.querySelector('#table');
  
  var tableDataSet = false;
  
  var selectedItems = [];
  var data = [{
    name : 'A'
  }, {
    name : 'B'
  }, {
    name : 'C'
  }, {
    name : 'D'
  }]
  
  table.addEventListener('click', fillComboBox);
  
  render();
  
  function render() {
    if (!tableDataSet) {
      setTableRows();
    }
    setComoboBoxOptios();
  }
    
  function setComoboBoxOptios() {
    var options = selectedItems.reduce(function (html, opt) {
      html += (
        '<option value="' + opt + '">' + opt + '</option>'
      );
      return html;
    }, '');
    
    comboBox.innerHTML = options;
  }
  
  function setTableRows () {
    var rows = data.reduce(function (html, item) {
      html += (
        '<tr>' +
          '<td>' + item.name + '</td>' +
          '<td><button data-name="' + item.name +'">add</button></td>' +
        '</tr>'
      );
      return html;
    }, '');
    
    table.querySelector('tbody').innerHTML = rows;
    tableDataSet = true;
  }
  
  function fillComboBox (e) {
    if (e.target.nodeName !== 'BUTTON') { return; }
    
    var name = e.target.dataset.name;
    e.target.disabled = true;
    e.target.innerHTML = 'added';
    selectedItems.push(name);
    render();
  }
  
  
})()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
 <div>
   <select name="combobox" id="combobox"></select>
   <table id="table">
     <thead>
       <tr>
         <th>Name</th>
         <th>Action</th>
       </tr>
     </thead>
     <tbody>
       
     </tbody>
   </table>
 </div>
</body>
</html>

用数组值填充组合框

1 个答案: