僅限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完成！對不起，我的代碼是雜亂無章的評論。我打算在我修好之後對它進行評論。如果你願意，我可以先評論。 –

是的，請添加一些評論，使其更容易理解。 –