Question

首先请查看图片Result that I want 结果将如下所示。

有两个选择下拉列表，即“系列”和“剧集”。最初，该情节是空的。选择系列后，情节将根据系列来获取数据。并且桌上有系列和剧集数据。首先，所有数据将可见。当某人选择一个系列或情节时，表格数据将根据所选字段进行过滤。我尝试了一些代码，请看看

<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

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

显示按钮列表，这些按钮将有关选择的数据发送到服务器
将过滤后的列表（基于选择）返回到模板

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

Reference。

编辑

从这里开始。更改：

<!-- 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"])

关于request.POST [“ method”]部分，我无法告诉您，因为我不知道您的数据如何处理（它必须是上下文中的类别之一），因此您将拥有自行查找，但这就是在实现过程中的外观。

根据选择下拉列表过滤表数据

1 个答案: