Change table data when select from a dropdown value

Question

At first please see the image : final result

There are two dropdowns and a table for showing data. 1st dropdown is 'Series' and the second is 'Episode'. When a series is selected, the episode dropdown will pull the episode name from which is under the selected series. And also show the details in the table.

Here is the select input:

            <div class="card-header d-flex align-items-center">
                <div class="flatpickr-wrapper flex">
                    <select class="selectpicker" data-live-search="true" id="seriesID">
                        <option>Select Series</option>
                        {% for series in series_context %}
                        <option value="{{series.id}}">{{ series.lesson_title }}</option>
                        {% endfor %}
                    </select>

                    <select id="episodeID">
                        <option>Select Series</option>
                        {% for ep_context in episode_context %}
                        <option value="{{ep_context.series_of.id}}">{{ ep_context.title }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

And this way i tried:

<script>
    $(document).ready(function () {
        var $seriesVar = $('#seriesID');
        var $episodeVar = $('#episodeID');
        var $options = $episodeVar.find('option');

        $seriesVar.on('change',function () {
            $episodeVar.html($options.filter('[value="'+this.value+'"]'));
        }).trigger('change');

        var $episodeTable = $('#episodeTable');
        var $tbody = $episodeTable.find('tr');

        $seriesVar.on('change', function () {
            $episodeTable.html($tbody.filter('[value="\'+this.value+\'"]'));
        }).trigger('change');
    });
</script>

My table id is "episodeTable"

All data exists in the table. But the data filter according to select dropdown is not working. Please help me with the code or the logic that how it should be.

Answer 1

Since you write that all the data in the table already exists, you could easily use the filter function and simply hide some rows. To filter the data, it would be easy if you could use the data attributes.

Then, you can solve it like this.

var $selectSeries = $('#seriesID'),
  $selectEpisode = $('#episodeID'),
  $episodeOptions = $selectEpisode.find('option'),
  $tbody = $('#results tbody'),
  $rows = $tbody.find('tr');

function onSeriesChange() {
  var selectedSeries = $selectSeries.val() || '',
    $filteredOptions = $episodeOptions.prop('selected', false).detach();

  $filteredOptions = $filteredOptions.filter('[data-series="' + selectedSeries + '"]');
  $selectEpisode.append($filteredOptions).prop('disabled', $filteredOptions.length == 0);

  if ($filteredOptions.length) {
    $filteredOptions.first().prop('selected', true);
  } else {
    $selectEpisode.append($episodeOptions.filter('.placeholder')).prop('disabled', true);
  }

  filterTable();
}

function onEpisodeChange() {
  filterTable();
}

function filterTable() {
  var $filteredRows = $rows.detach(),
    selectedSeries = $selectSeries.val() || '',
    selectedEpisode = $selectEpisode.val() || '';

  if (selectedSeries != '') {
    $filteredRows = $filteredRows.filter('[data-series="' + selectedSeries + '"]');
    $filteredRows = $filteredRows.filter('[data-episode="' + selectedEpisode + '"]');
  }

  $tbody.append($filteredRows);
}

filterTable();
$selectSeries.on('change', onSeriesChange);
$selectEpisode.on('change', onEpisodeChange);

th,
td {
  padding: 4px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card-header d-flex align-items-center">
  <div class="flatpickr-wrapper flex">
    <select id="seriesID" class="selectpicker" data-live-search="true">
      <option value="">Select Series</option>
      <option value="1">Series 01</option>
      <option value="2">Series 02</option>
      <option value="3">Series 03</option>
    </select>

    <select id="episodeID" disabled>
      <option value="" class="placeholder">Select Series</option>
      <!-- series 01 -->
      <option value="1" data-series="1">Episode 01</option>
      <option value="2" data-series="1">Episode 02</option>
      <option value="3" data-series="1">Episode 03</option>
      <option value="4" data-series="1">Episode 04</option>
      <!-- series 02 -->
      <option value="5" data-series="2">Episode 01</option>
      <option value="6" data-series="2">Episode 02</option>
      <option value="7" data-series="2">Episode 03</option>
      <!-- series 03 -->
      <option value="30" data-series="3">Episode 01</option>
      <option value="31" data-series="3">Episode 02</option>
      <option value="32" data-series="3">Episode 03</option>
    </select>
  </div>
</div>

<table id="results">
  <thead>
    <tr>
      <th>Series</th>
      <th>Episode</th>
      <th>Name</th>
      <th>Category</th>
      <th>Subcategory</th>
    </tr>
  </thead>
  <tbody>
    <tr data-series="1" data-episode="1">
      <td>Series 01</td>
      <td>Episode 01</td>
      <td>01_01_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="1" data-episode="2">
      <td>Series 01</td>
      <td>Episode 02</td>
      <td>01_02_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="1" data-episode="3">
      <td>Series 01</td>
      <td>Episode 03</td>
      <td>01_03_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="1" data-episode="4">
      <td>Series 01</td>
      <td>Episode 04</td>
      <td>01_04_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="2" data-episode="5">
      <td>Series 02</td>
      <td>Episode 01</td>
      <td>02_01_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="2" data-episode="6">
      <td>Series 02</td>
      <td>Episode 02</td>
      <td>02_02_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="2" data-episode="7">
      <td>Series 02</td>
      <td>Episode 03</td>
      <td>02_03_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="3" data-episode="30">
      <td>Series 03</td>
      <td>Episode 01</td>
      <td>03_01_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="3" data-episode="31">
      <td>Series 03</td>
      <td>Episode 02</td>
      <td>03_02_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="3" data-episode="32">
      <td>Series 03</td>
      <td>Episode 03</td>
      <td>03_03_01</td>
      <td>sports</td>
      <td>football</td>
    </tr>
    <tr data-series="3" data-episode="32">
      <td>Series 03</td>
      <td>Episode 03</td>
      <td>03_03_02</td>
      <td>sports</td>
      <td>football</td>
    </tr>
  </tbody>
</table>