Jquery. Find all <tr> containing text from selected <option>

Question

I try to show all lines contaning selected text from option after click on button, this is my code:

<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>

I try to do something like this but it doesnt work:

$(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();              
 });    
});

Can someone help me, pls :)

Answer 1

You need something like this. Don't pollute global space and use proper selectors. And there is no need to wrap a jQuery object again.

$(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();
    });
});

Answer 2

Try this : You can use each to check each tr for selected option text and make it visible. No need to use closest('tr') as $(this) itself is a TR .

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

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

Answer 3

You can't use contains cause match any element that simple contains test(Select all elements that contain the specified text). Bu you can use each and match any td with same text and show parent( tr ) like:

 b = $("tr"); $(".show").on("click", function() { var a = $("select option:selected").text(); $(b).hide(); $("td").each(function() { if ($(this).text() == a) { $(this).parents("tr").show(); } }); }); $(".hide").on("click", function() { $(b).show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option>text1</option> <option>text2</option> <option>text3</option> <option>text4</option> </select> <button class="show">show</button> <button class="hide">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> 

Answer 4

Make your buttons run functions directly here.

function show() {
   var needle = $("select option:selected").text();
   $('#myTable td').each(function() {
        if ($(this).text() === needle) $(this).show();
   });
}
function hide() {
   var needle = $("select option:selected").text();
   $('#myTable td').each(function() {
        if ($(this).text() === needle) $(this).hide();
   });
}

Take a look at this (jsFiddle) .