从下拉值中选择时更改表数据

Question

首先请看图片：final result

有两个下拉菜单和一个用于显示数据的表格。第一个下拉菜单是“系列”，第二个是“剧集”。 选择一个系列后，剧集下拉菜单将拉取​​所选系列下的剧集名称。并在表格中显示详细信息。

这里是选择输入：

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

我试过这种方式：

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

我的表 id 是“episodeTable”

所有数据都存在于表中。但是根据选择下拉列表的数据过滤器不起作用。请帮助我提供代码或应该如何的逻辑。

Answer 1

由于您写到表中的所有数据都已经存在，您可以轻松地使用filter 函数并简单地隐藏一些行。要过滤数据，如果您可以使用data attributes 会很容易。

那么，你可以这样解决。

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>