仅限Javascript：函数呈现下拉列表和表格，其中需要使用下拉列表中的值来过滤表格

我创建了一个呈现下拉列表和表格的函数。这个下拉列表给出了我在函数内使用的值来过滤表。出于某种原因，当我重新选择下拉菜单中的内容时，它不会更新。仅限Javascript：函数呈现下拉列表和表格，其中需要使用下拉列表中的值来过滤表格

没有框架请谢谢！

下面是一些截图：它不更新显示的列，因为当我console.log（）从下拉列表中的值不会更新。它仍然说1 5，但当我点击第二个应该说2 5. 我选择了第二个选项的下拉列表。我不知道如何做到这一点。对不起，我是初学者。

//function which we will use to hide and unhide rows 
function toggleClass(element, className, toSet) { 
    element.classList[toSet ? 'add' : 'remove'](className); 
} 
//The table is already rendered and when the buttons on the screen are clicked, this pagination function is called 
function columnPagination(input) { 
    var table = document.getElementById("tablePrint"), 
    dataRows = table.getElementsByTagName('tr'), 
    listHTML = ""; 
    //get date labels for dropdown 
    var filterDateLabels = []; 
    var columns = table.getElementsByTagName('th'); 
    for(var ii = 0; ii < columns.length; ii++){ 
     if(ii%input==0){ 
      filterDateLabels.push(columns[ii].innerHTML.slice(21,33)); 
     } 
     if(ii%input==input-1){ 
      filterDateLabels.push(columns[ii].innerHTML.slice(21,33)); 
     } 
    } 
    //display dropdown with values which you will use to filter the table 
    listHTML += "<select id=\"pagenumber\")>"; 
    for(var ii = 0; ii < filterDateLabels.length; ii++){ 
     listHTML += "<option value = \"" + ii + "\">" + filterDateLabels[ii] + " - "; 
     if(filterDateLabels[ii+1]!= ""){ 
      listHTML += filterDateLabels[ii+1] + "</option>"; 
      ii++; 
     } 
     else{ 
      listHTML+="LAST </select>"; 
     } 
    } 
    document.getElementById('dates').innerHTML = listHTML; 
    var multiplier = document.getElementById('pagenumber').value; 
    multiplier = multiplier/2; 
    if(multiplier == 0){ 
     multiplier = 1; 
    } 
    //hiding function which works but doesn't update when the dropdown is clicked 
    input = input*multiplier; 
    console.log(multiplier, input); 
    for (var i = 0; i < dataRows.length; i++) { 
     var cells = dataRows[i].children; 
     for (var cell = 0; cell < cells.length; cell++) { 
      toggleClass(cells[cell], 'hide', cell > input) 
     } 
    } 
}

来源

2016-12-22 King Alandy Dy

请为我们提供代码。 –

@KevinKloet完成！对不起，我的代码是杂乱无章的评论。我打算在我修好之后对它进行评论。如果你愿意，我可以先评论。 –

是的，请添加一些评论，使其更容易理解。 –