jQuery 过滤表包括 <select> <option> 单元格答案

【问题标题】：jQuery filter table includes <select> <option> celljQuery 过滤表包括 <select> <option> 单元格
【发布时间】：2015-12-22 05:37:07
【问题描述】：

我是 jQuery 新手。我有一个表格，在下面的单元格中包含<select><option> 标签。

<html>
<input type="text" id="searchInput">
<table border=1>
 <thead>
  <th>ID</th><th>Name</th><th>position</th>
 </thead>
 <tbody id="fbody">
  <tr>
    <td>1</td>
    <td>A</td>
    <td><select>
        <option selected>front</option>
        <option>center</option>
        <option>back</option>
        </select>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
    <td><select>
        <option>front</option>
        <option selected>center</option>
        <option>back</option>
        </select>
    </td>
  </tr>
 </tbody>
</table>
</html>

我找到了一个如下所示的 jQuery 代码，我正在尝试过滤上表。但它不适用于<select><option> 单元格。我想知道如何使代码工作以过滤以获取选定的值。

我想做的是，当我在输入框中输入“中心”时，只显示第二行。

<script>
$("#searchInput").keyup(function () {
    console.log("value=%o", this.value);
    //split the current value of searchInput
    var data = this.value.split(" ");
    //create a jquery object of the rows
    var jo = $("#fbody").find("tr")
    //hide all the rows
    .hide();

    //Recusively filter the jquery object to get results.
    jo.filter(function (i, v) {
        var $t = $(this);
        for (var d = 0; d < data.length; ++d) {
            if ($t.is(":contains('" + data[d] + "')")) {
                console.log(data[d]);
                return true;
            }
        }
        return false;
    })
    //show the rows that match.
    .show();
}).focus(function () {
    this.value = "";
    $(this).css({
        "color": "black"
    });
    $(this).unbind('focus');
}).css({
    "color": "#C0C0C0"
});

</script>

【问题讨论】：

标签： javascript jquery select filter html-table

【解决方案1】：

您可以尝试将过滤条件更改为

jo.each(function () {

    $( this ).find( "td select option:selected" ).each( function(){
        for (var d = 0; d < data.length; ++d) 
        {
            if ( $( this ).text() == data[d] ) 
            {
                console.log(data[d]);
                $( this ).parent("tr").show();
                break;
            }
        }
    })
});

甚至干脆

$("#fbody").find("option:selected").each(function () {
   if ( data.indexOf( $( this ).text() ) != -1 ) //updated this line
   {
       $( this ).parent().parent().parent().show();
   }
});

如果要将 TD 中的部分值与文本框中输入的值进行比较

  $( data ).each( function ( index, valueArr ){
    if ( value.indexOf( valueArr ) != -1 )
    {
       $td.parent().show();
    }
  } );

【讨论】：

谢谢您，我尝试了您的两个代码，但似乎不起作用。我在方框里放了一些字，没有显示出来。
@sean_y24 你能分享一下小提琴吗？只需验证您如何使用我提供的代码即可。
感谢您的评论，我也是新手。让我分享链接。我希望这个链接是正确的。 jsfiddle.net/0ynqouLL/1/embedded/result
@sean_y24 缺少括号，正在编辑帖子。
谢谢！我看到它正在工作。如果我在文本框中输入“B”，它是否可以工作，然后它会显示 row2，如果我输入“ce”，它也会显示 row2。非常感谢。

【解决方案2】：

尝试使用:selected

if ($t.find('> select > option').is(":selected:contains('" + data[d] + "')")) {

【讨论】：

感谢您的回答，我将代码 "if ($t.is(":contains('" + data[d] + "')")) {" 更改为您的，但是没用……我换地方了吗？