使用HTML中的Select标记搜索表(不仅获取Select标记的值)

时间:2019-01-09 02:12:08

标签: javascript html

当前,我有一个项目,该项目需要使用html的<select>标签来搜索表格。

问题:

如果我选择<select>标记中的选项之一,则表必须删除所有不相等的行。并且只有相等的值将保留在该表上。

我一直在谷歌搜索一些解决方案,但是找不到。 但是我发现此代码仅适用于<input>

任何帮助将不胜感激。谢谢

HTML:

                <ons-select id="choose1" style="width:97%;">
                  <option ng-repeat="test in test_" value="1" >Sample</option>
                  <option ng-repeat="test in test_" value="2" >Example</option>
                </ons-select>  

JAVASCRIPT:

<script>
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>

已添加:

例如。我在<select>标签中选择了Sample,该表将仅显示具有Sample值的行。 Example就会消失,反之亦然。

HTML表格:

    <table style="margin-top: 20px; width:100%;" id="myTable">
      <tr>
        <th>ID</th>
        <th>Title</th> 
      </tr>
      <tr>
    <td align="center">1</td>
    <td align="center">Example</td> 
     </tr>
    <tr>
    <td align="center">2</td>
    <td align="center">Sample</td> 
   </tr>
</table>

0 个答案:

没有答案