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

Question

首先请看图片：最终结果有两个下拉列表和一个用于显示数据的表格。第一个下拉列表是“系列”，第二个是“剧集”。选择系列后，剧集下拉菜单将从中提取所选系列下的剧集名称。并在表中显示详细信息。这是选择输入：            <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

由于您写的是表中的所有数据都已经存在，因此您可以轻松地使用过滤功能并简单地隐藏一些行。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>