首先請看圖片：最終結果有兩個下拉列表和一個用于顯示數據的表格。第一個下拉列表是“系列”，第二個是“劇集”。選擇系列后，劇集下拉菜單將從中提取所選系列下的劇集名稱。并在表中顯示詳細信息。這是選擇輸入： <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”所有數據都存在于表中。但是根據選擇下拉列表的數據過濾器不起作用。請幫助我了解代碼或應該如何處理的邏輯。
1 回答
HUH函數
TA貢獻1836條經驗 獲得超4個贊
由于您寫的是表中的所有數據都已經存在，因此您可以輕松地使用過濾功能并簡單地隱藏一些行。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>
添加回答
舉報
0/150
提交
取消