时间戳

首页 > 解决方案 > JS过滤多选数组只返回最后一个元素

javascript - JS过滤多选数组只返回最后一个元素

问题描述

我正在构建一个历史破折号（由于安全原因，目前使用虚假数据），并且我有一个多选列表，该列表按字母顺序生成该人的名字。现在，选择一个名称时，它会以该名称降低了桌子。当我选择多个名称时，它会重新生成具有“最低”字母名称的表。我无法弄清楚为什么我的过滤器函数没有使用“选定”语句中所有选定名称构建新数组。但是，我使用了 push() 函数并且该函数有效，但仅显示了名字。任何帮助都会很棒，我是 JS 新手，使用 DOM 真的很有趣！

histData 是包含所有信息的主数组，

fNameArr 是给定多重选择的过滤器方法中重新填充的数组

这是我的js：

function mSelList(){

    var selName = document.getElementById("jomax");
    var fNameArr;

    for(i=0; i<selName.length;i++){

         let currentName = selName[i];

         if(currentName.selected == true){

             let fName = currentName.value;

             fNameArr = histData.filter(function(data){

                 return data.first_name == fName; 

             });

         }
 }

 function createTable(){

         var col = [];
         for (var i = 0; i < fNameArr.length; i++) {
             for (var key in fNameArr[i]) {
                 if (col.indexOf(key) === -1) {
                     col.push(key);
                 }
             }
         }

         // create table section with css filters
         var table = document.createElement("table");
         table.setAttribute("class", "table is-hoverable is-bordered is-narrow");
         table.setAttribute("id", "table");

         var tr = table.insertRow(-1);                  

         for (var i = 0; i < col.length; i++) {
             var th = document.createElement("th");
             th.setAttribute("class", "is-uppercase is-size-7");  // attributes
             th.innerHTML = col[i];
             tr.appendChild(th);
         } 

         for (var i = 0; i < fNameArr.length; i++) {

             tr = table.insertRow(-1);

             for (var j = 0; j < col.length; j++) {
                 var tabCell = tr.insertCell(-1);
                 tabCell.innerHTML = fNameArr[i][col[j]];
             }
         }
         var tblSec = document.getElementById("tableSec");
         tblSec.innerHTML = "";
         tblSec.appendChild(table);
         }
         createTable();

     }

标签： javascripthtmlarrays

解决方案

您正在使用getElementById并在其上运行循环吗？getElementById将返回一个特定元素而不是元素列表。这是mdn_link以获取更多信息。

var selName = document.getElementById("jomax");

我建议改用类。

推荐阅读