Select Dropdown Filter

by Suryar Praveen

HTML

<table>
<tr>
<th>Day</th>
<th><select class="target">
<option>M</option>
<option>F</option>
</select>
</th>
<th>Number</th>
</tr>
<tr>
  <td>Sunday</td>
  <td>Male</td>
  <td>2</td>
</tr>
<tr>
  <td>Monday</td>
  <td>Male</td>
  <td>2</td>
</tr>

<tr>
  <td>Tuesday</td>
  <td>Female</td>
  <td>1</td>
</tr>

<tr>
  <td>Wednesday</td>
  <td>Male</td>
  <td>2</td>
</tr>

<tr>
  <td>Thursday</td>
  <td>Female</td>
  <td>1</td>
</tr>

<tr>
  <td>Friday</td>
  <td>Male</td>
  <td>2</td>
</tr>

<tr>
  <td>Saturday</td>
  <td>Male</td>
  <td>2</td>
</tr>

</table>

CSS

table, th, td, select {
   border: 1px solid black;
   text-align:center;
   width:50%;
}
.hide {display:none;}

JavaScript

$('select').on('change', function() {
$("td:contains('Female')").css("display","block");
//$("td").css("display","none");
$("td").addClass("hide");
$("td:contains('Male')").css("display","block");
});