使用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更新下拉列表的值

回答

相关问题