根据选择下拉列表筛选表数据

Question

首先请查看我想要的图像结果结果会是这样的。

有两个选择下拉菜单，系列和剧集。最初，提交的剧集是空的。当选择一个系列时，该集将根据该系列获取数据。表上还有系列和剧集的数据。起初，所有数据都将可见。当有人选择一个系列或剧集时，表格数据将根据所选字段进行过滤。我试过一些代码，请看一下

<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 class="table-responsive" data-toggle="lists" data-lists-sort-by="js-lists-values-orders-name"
data-lists-values='["js-lists-values-orders-name", "js-lists-values-orders-date", "js-lists-values-orders-amount"]'>
<table class="table mb-0 table-nowrap thead-border-top-0">
<thead>
<tr>
<th>SL </th>
<th> Episode </th>
<th> Price </th>
</tr>
</thead>
<tbody class="list" id="episodeTable">
{% for l_context in series_context %}
{% for ep_context in episode_context %}
{% if l_context == ep_context.series_of %}
<tr>
<td>
<p>{{ forloop.counter }}</p>
</td>
<td>
<div class="d-flex align-items-center">
<a class="js-lists-values-orders-name"  onclick="changeVideo('{{ep_context.video}}')" href="#" id=" video-link-{{ ep_context.id}}">
<b>{{ ep_context.title }}</b>
</a>
</div>
</td>
<td>
<p><b>${{ ep_context.price }}</b></p>
</td>
</tr>
{% endif %}
{% endfor %}
{% endfor %}
</table>
</div>

脚本：

<script>
$(document).ready(function () {
var $seriesVar = $('#seriesID');
var $episodeVar = $('#episodeID');
var $episodeTable = $('#episodeTable');
var $options2 = $episodeTable.find('');
$seriesVar.on('change',function () {
$episodeTable.html($options2.filter('[value="'+this.value+'"]'));
}).trigger('change');
});
</script>

在后台，我使用Django。请帮我找出我的错误，或者用正确的格式重新排列我的代码。如何找到正确的结果？

Answer 1

我要做的是分两部分完成此操作：

1. 显示一个按钮列表，用于向服务器发送有关选择的数据
2. 将筛选后的列表(基于选择(返回到模板

显示项目列表，然后在name属性中放入不同的选项，供Django服务器读取。请注意，您需要至少有两个按钮，否则它将无法工作。然后，根据用户的选择返回查询集。您应该将其添加到您的视图中，或者添加到您认为适合处理这些数据的任何位置。

参考。

编辑

从这里开始。更改：

<!-- original -->
<option value="{{series.id}}">{{ series.lesson_title }}</option>
<!-- end -->
<option value="{{series.id}}" name="{{series.id}}">{{ series.lesson_title }}</option>

然后，对您的视图执行以下操作：

qs = Modelclass.objects.filter_by(request.POST["method"])

关于请求。POST["方法"]部分，我不能告诉你，因为我不知道你的数据是如何处理的(它必须是你上下文中的某个类别之一(，所以你必须自己找到，但这是它在你的实现中的简要外观。