How to hide div upon dropdown selection

August 16, 2022

Upon loading my table page, I want the table to be completely hidden.When I load the page, I want to filter the data and display the headers and related data based on the selected filter.

I am able to hide the table upon page load as well as filter it. My issue:

In the Location drop-down menu, when I select the value "Location again", Notes appear. How can I hide the div/Notes(similar to page load)?

Please see the sample code here: http://live.datatables.net/bovaqoqo/1/edit

$(document).ready(function () {
  // hide table on load
$('#table-wrap').hide();

    var table = $('#example').DataTable({
        paging: false,
    searching: true,
    lengthChange: false,
responsive: false,
scrollX: true,
    bInfo: false,
    bSort: false,
    "language": {
    "zeroRecords": ""
  }
  });

  $('#table-filter').on('change', function () {
    // show the tbody when the user clicks on a filter option
$('#table-wrap').show();

    table.search(this.value).draw();
  });
});

.dataTables_wrapper .dataTables_filter {
padding-bottom: 16px;
 display: none;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />

  </head>
  <body>
 <p>Select: <select id="table-filter">
<option>Location</option>
<option>Dallax, TX</option>
<option>Boston, MA</option>
<option>Sandy, UT</option>
<option>Washington, DC</option>
<option>Omaha, NE</option>
</select>
</p>

<div id="table-wrap">
<table id="example" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>Location</th>
<th>Name</th>
<th>Job</th>
<th>Salary</th>
</tr>

</thead><tbody>
<tr>
<td>Dallax, TX</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>

<tr>
<td>Boston, MA</td>
<td>test2</td>
<td>test2</td>
  <td>test2</td>
</tr>

<tr>
<td>Sandy, UT</td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>

<tr>
<td>Washington, DC</td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>

<tr>
<td>Omaha, NE</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>

</tbody></table>
  
  <p><strong>Notes</strong><br>
*Test1<br>
**Test2<br>

    </div>
  </body>
</html>

>Solution :

Check the selected value on change, if it’s == 'Location' then hide the table again.

$(document).ready(function () {
  // hide table on load
$('#table-wrap').hide();

    var table = $('#example').DataTable({
        paging: false,
    searching: true,
    lengthChange: false,
responsive: false,
scrollX: true,
    bInfo: false,
    bSort: false,
    "language": {
    "zeroRecords": ""
  }
  });

  $('#table-filter').on('change', function () {
  
    if (this.value == 'Location') {
      $('#table-wrap').hide();
    } else {
      // show the tbody when the user clicks on a filter option
      $('#table-wrap').show();
      table.search(this.value).draw();
    }
    
  });
});

.dataTables_wrapper .dataTables_filter {
padding-bottom: 16px;
 display: none;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />

  </head>
  <body>
 <p>Select: <select id="table-filter">
<option>Location</option>
<option>Dallax, TX</option>
<option>Boston, MA</option>
<option>Sandy, UT</option>
<option>Washington, DC</option>
<option>Omaha, NE</option>
</select>
</p>

<div id="table-wrap">
<table id="example" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>Location</th>
<th>Name</th>
<th>Job</th>
<th>Salary</th>
</tr>

</thead><tbody>
<tr>
<td>Dallax, TX</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>

<tr>
<td>Boston, MA</td>
<td>test2</td>
<td>test2</td>
  <td>test2</td>
</tr>

<tr>
<td>Sandy, UT</td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>

<tr>
<td>Washington, DC</td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>

<tr>
<td>Omaha, NE</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>

</tbody></table>
  
  <p><strong>Notes</strong><br>
*Test1<br>
**Test2<br>

    </div>
  </body>
</html>