猿问

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

首先请看图片:最终结果

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

这是选择输入:

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


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


手掌心
浏览 121回答 1
1回答

HUH函数

由于您写的是表中的所有数据都已经存在,因此您可以轻松地使用过滤功能并简单地隐藏一些行。data&nbsp;要过滤数据,如果可以使用attributes会很容易。那么,你可以这样解决。var $selectSeries = $('#seriesID'),&nbsp; $selectEpisode = $('#episodeID'),&nbsp; $episodeOptions = $selectEpisode.find('option'),&nbsp; $tbody = $('#results tbody'),&nbsp; $rows = $tbody.find('tr');function onSeriesChange() {&nbsp; var selectedSeries = $selectSeries.val() || '',&nbsp; &nbsp; $filteredOptions = $episodeOptions.prop('selected', false).detach();&nbsp; $filteredOptions = $filteredOptions.filter('[data-series="' + selectedSeries + '"]');&nbsp; $selectEpisode.append($filteredOptions).prop('disabled', $filteredOptions.length == 0);&nbsp; if ($filteredOptions.length) {&nbsp; &nbsp; $filteredOptions.first().prop('selected', true);&nbsp; } else {&nbsp; &nbsp; $selectEpisode.append($episodeOptions.filter('.placeholder')).prop('disabled', true);&nbsp; }&nbsp; filterTable();}function onEpisodeChange() {&nbsp; filterTable();}function filterTable() {&nbsp; var $filteredRows = $rows.detach(),&nbsp; &nbsp; selectedSeries = $selectSeries.val() || '',&nbsp; &nbsp; selectedEpisode = $selectEpisode.val() || '';&nbsp; if (selectedSeries != '') {&nbsp; &nbsp; $filteredRows = $filteredRows.filter('[data-series="' + selectedSeries + '"]');&nbsp; &nbsp; $filteredRows = $filteredRows.filter('[data-episode="' + selectedEpisode + '"]');&nbsp; }&nbsp; $tbody.append($filteredRows);}filterTable();$selectSeries.on('change', onSeriesChange);$selectEpisode.on('change', onEpisodeChange);th,td {&nbsp; 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">&nbsp; <div class="flatpickr-wrapper flex">&nbsp; &nbsp; <select id="seriesID" class="selectpicker" data-live-search="true">&nbsp; &nbsp; &nbsp; <option value="">Select Series</option>&nbsp; &nbsp; &nbsp; <option value="1">Series 01</option>&nbsp; &nbsp; &nbsp; <option value="2">Series 02</option>&nbsp; &nbsp; &nbsp; <option value="3">Series 03</option>&nbsp; &nbsp; </select>&nbsp; &nbsp; <select id="episodeID" disabled>&nbsp; &nbsp; &nbsp; <option value="" class="placeholder">Select Series</option>&nbsp; &nbsp; &nbsp; <!-- series 01 -->&nbsp; &nbsp; &nbsp; <option value="1" data-series="1">Episode 01</option>&nbsp; &nbsp; &nbsp; <option value="2" data-series="1">Episode 02</option>&nbsp; &nbsp; &nbsp; <option value="3" data-series="1">Episode 03</option>&nbsp; &nbsp; &nbsp; <option value="4" data-series="1">Episode 04</option>&nbsp; &nbsp; &nbsp; <!-- series 02 -->&nbsp; &nbsp; &nbsp; <option value="5" data-series="2">Episode 01</option>&nbsp; &nbsp; &nbsp; <option value="6" data-series="2">Episode 02</option>&nbsp; &nbsp; &nbsp; <option value="7" data-series="2">Episode 03</option>&nbsp; &nbsp; &nbsp; <!-- series 03 -->&nbsp; &nbsp; &nbsp; <option value="30" data-series="3">Episode 01</option>&nbsp; &nbsp; &nbsp; <option value="31" data-series="3">Episode 02</option>&nbsp; &nbsp; &nbsp; <option value="32" data-series="3">Episode 03</option>&nbsp; &nbsp; </select>&nbsp; </div></div><table id="results">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Series</th>&nbsp; &nbsp; &nbsp; <th>Episode</th>&nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; <th>Category</th>&nbsp; &nbsp; &nbsp; <th>Subcategory</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr data-series="1" data-episode="1">&nbsp; &nbsp; &nbsp; <td>Series 01</td>&nbsp; &nbsp; &nbsp; <td>Episode 01</td>&nbsp; &nbsp; &nbsp; <td>01_01_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="1" data-episode="2">&nbsp; &nbsp; &nbsp; <td>Series 01</td>&nbsp; &nbsp; &nbsp; <td>Episode 02</td>&nbsp; &nbsp; &nbsp; <td>01_02_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="1" data-episode="3">&nbsp; &nbsp; &nbsp; <td>Series 01</td>&nbsp; &nbsp; &nbsp; <td>Episode 03</td>&nbsp; &nbsp; &nbsp; <td>01_03_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="1" data-episode="4">&nbsp; &nbsp; &nbsp; <td>Series 01</td>&nbsp; &nbsp; &nbsp; <td>Episode 04</td>&nbsp; &nbsp; &nbsp; <td>01_04_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="2" data-episode="5">&nbsp; &nbsp; &nbsp; <td>Series 02</td>&nbsp; &nbsp; &nbsp; <td>Episode 01</td>&nbsp; &nbsp; &nbsp; <td>02_01_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="2" data-episode="6">&nbsp; &nbsp; &nbsp; <td>Series 02</td>&nbsp; &nbsp; &nbsp; <td>Episode 02</td>&nbsp; &nbsp; &nbsp; <td>02_02_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="2" data-episode="7">&nbsp; &nbsp; &nbsp; <td>Series 02</td>&nbsp; &nbsp; &nbsp; <td>Episode 03</td>&nbsp; &nbsp; &nbsp; <td>02_03_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="3" data-episode="30">&nbsp; &nbsp; &nbsp; <td>Series 03</td>&nbsp; &nbsp; &nbsp; <td>Episode 01</td>&nbsp; &nbsp; &nbsp; <td>03_01_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="3" data-episode="31">&nbsp; &nbsp; &nbsp; <td>Series 03</td>&nbsp; &nbsp; &nbsp; <td>Episode 02</td>&nbsp; &nbsp; &nbsp; <td>03_02_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="3" data-episode="32">&nbsp; &nbsp; &nbsp; <td>Series 03</td>&nbsp; &nbsp; &nbsp; <td>Episode 03</td>&nbsp; &nbsp; &nbsp; <td>03_03_01</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr data-series="3" data-episode="32">&nbsp; &nbsp; &nbsp; <td>Series 03</td>&nbsp; &nbsp; &nbsp; <td>Episode 03</td>&nbsp; &nbsp; &nbsp; <td>03_03_02</td>&nbsp; &nbsp; &nbsp; <td>sports</td>&nbsp; &nbsp; &nbsp; <td>football</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>
随时随地看视频慕课网APP

相关分类

Python
我要回答