javascript - 查询。从选定的 <option> 中查找所有包含文本的 <tr>

Question

我尝试在点击按钮后显示包含选项中所选文本的所有行，这是我的代码:

<select>
 <option>text1</option>
 <option>text2</option>
 <option>text3</option>
 <option>text4</option>
</select>
<button class="show"></button>
<button class="hide"></button>
<table>
 <tr>
  <td>text1</td><td>....</td>
 </tr>
 <tr>
  <td>text2</td><td>....</td>
 </tr>
 <tr>
  <td>text3</td><td>....</td>
 </tr>
 <tr>
  <td>text1</td><td>....</td>
 </tr>
</table>

我尝试做这样的事情，但它不起作用:

$(function(){
  b = $("tr");
  $(".show").on("click", function(){
   var a = $("select option:selected").text();
   $(b).hide();
   if ($("tr:contains('"+a+"')").length) 
    $(this).closest(tr).show();
 });

 $(".hide").on("click", function(){
  $(b).show();              
 });    
});

有人可以帮助我吗，请 :)

Answer 1

你需要这样的东西。不要污染全局空间并使用适当的选择器。并且不需要再包装一个 jQuery 对象。

$(function() {
    var b = $("table");
    $(".show").on("click", function() {
        var a = $("select option:selected").text();
        b.find("tr").hide().end().find("td:contains('" + a + "')").parent().show();
    });
    $(".hide").on("click", function() {
        b.find("tr").show();
    });
});