使用jquery或javascript更新下拉列表值時使用jQuery或javascript更新下拉列表的值

-3

我有HTML表格，當頁面加載時加載，並且每個列都有下拉菜單，當我從下拉菜單中選擇一個值時，表格應該刷新所選下拉值。我不應該調用任何服務器調用，因爲html表具有所有數據。請在此建議我。使用jquery或javascript更新下拉列表值時使用jQuery或javascript更新下拉列表的值

來源

2016-11-22 Dayananda

提供您的HTML和jQuery您已經嘗試了什麼 – ScanQR

把你的代碼放在小提琴中...... – pareshm

如果你對任何第三方網格都沒問題，你可以使用https://datatables.net/examples/api/multi_filter_select.html –

所以在這一點，你可能需要手動構建HTML或者您也可以按照這些步驟，

根據您的過濾器
創建JS數組轉換這個數組爲HTML通過循環或使用任何插件到 convert
將生成的HTML綁定到容器div。

或者你可以遵循這個，因爲它是在這個jsfiddle

HTML解釋

<title>Filter Table</title> 

<body> 
    <div class="optionsDiv"> 
     Filter By Position 
     <select id="selectField"> 
      <option value="All" selected>All</option> 
      <option value="Student">Student</option> 
      <option value="Assistant">Assistant</option> 
      <option value="Professor">Professor</option> 

     </select> 

    </div> 
    <table id="myTable"> 
     <tr id="HeadRow"> 
      <td>First Name</td> 
      <td>Last Name</td> 
      <td>Age</td> 
      <td>Position</td> 
     </tr> 

     <tr position="Student"> 
      <td>John</td> 
      <td>John's Last name</td> 
      <td>25</td> 
      <td>Student</td> 
     </tr> 

     <tr position="Assistant"> 
      <td>Timmy</td> 
      <td>Timmy's Last name</td> 
      <td>22</td> 
      <td>Assistant</td> 
     </tr> 

     <tr position="Professor"> 
      <td>Billy</td> 
      <td>Billy's Last name</td> 
      <td>40</td> 
      <td>Professor</td> 
     </tr> 

     <tr position="Professor"> 
      <td>Eddy</td> 
      <td>Eddy's Last name</td> 
      <td>35</td> 
      <td>Professor</td> 
     </tr> 

     <tr position="Professor"> 
      <td>Emma</td> 
      <td>Emma's Last name</td> 
      <td>38</td> 
      <td>Professor</td> 
     </tr> 

     <tr position="Student"> 
      <td>Emily</td> 
      <td>Emily's Last name</td> 
      <td>20</td> 
      <td>Student</td> 
     </tr> 

     <tr position="Assistant"> 
      <td>Jack</td> 
      <td>Jack's Last name</td> 
      <td>30</td> 
      <td>Assistant</td> 
     </tr> 

     <tr position="Student"> 
      <td>Robert</td> 
      <td>Robert's Last name</td> 
      <td>20</td> 
      <td>Student</td> 
     </tr> 

     <tr position="Assistant"> 
      <td>Danny</td> 
      <td>Danny's Last name</td> 
      <td>37</td> 
      <td>Assistant</td> 
     </tr> 

     <tr position="Professor"> 
      <td>Erick</td> 
      <td>Erick's Last name</td> 
      <td>42</td> 
      <td>Professor</td> 
     </tr> 
    </table> 

</body>

JQuery的

$(document).ready(function() { 

    function addRemoveClass(theRows) { 

     theRows.removeClass("odd even"); 
     theRows.filter(":odd").addClass("odd"); 
     theRows.filter(":even").addClass("even"); 
    } 

    var rows = $("table#myTable tr:not(:first-child)"); 

    addRemoveClass(rows); 


    $("#selectField").on("change", function() { 

     var selected = this.value; 

     if (selected != "All") { 

      rows.filter("[position=" + selected + "]").show(); 
      rows.not("[position=" + selected + "]").hide(); 
      var visibleRows = rows.filter("[position=" + selected + "]"); 
      addRemoveClass(visibleRows); 
     } else { 

      rows.show(); 
      addRemoveClass(rows); 

     } 

    }); 
});

來源

2016-11-22 11:37:55

嗨Sibeesh，感謝您的幫助，並感謝您的快速回復。我想通過很多下拉菜單（選擇選項）來篩選它，從我看到它們構建的示例中，例如，如果想按年齡，名稱，姓氏，過濾它，我需要在這裏做什麼？因爲表格是靜態表格，是否需要構建具有年齡=和姓氏=？的 – Dayananda

@Dayananda如果有幫助，請接受我的答案，這是我們在這裏說的感謝方式:) –

是的，你可以嘗試這種方式。但正如我在評論部分所說，如果使用任何網格插件，這可能會更容易。謝謝 –

使用jquery或javascript更新下拉列表值時使用jQuery或javascript更新下拉列表的值

回答

相關問題