首先请看图片:最终结果
有两个下拉列表和一个用于显示数据的表格。第一个下拉列表是“系列”,第二个是“剧集”。选择系列后,剧集下拉菜单将从中提取所选系列下的剧集名称。并在表中显示详细信息。
这是选择输入:
<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”
所有数据都存在于表中。但是根据选择下拉列表的数据过滤器不起作用。请帮助我了解代码或应该如何处理的逻辑。
HUH函数
相关分类