Filter table data depending on select dropdown

Question

At first please see the image Result that I want There result will look like this.

There are two select dropdowns, Series and episodes. Initially, the episode filed is empty. When a series is selected, the episode will fetch the data depending on the series. And there are series and episode data on the table. At first, all data will visible. When someone selects a series or episode, table data will be filtered depending on the selected field. I have tried some code, please have a look

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

Table:

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

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

In the backend I use Django. Please help me to find my mistakes or re-arrange my code with the correct formate. How can I find the correct result?

Welcome to Stack Overflow. Hope you like it here. Given that this is a client-side question providing actual HTML - harvested from the browser - can be very helpful in understanding and answering your question. No need to post server-side code if it does not clarify your question. Please take the Tour: stackoverflow.com/tour and provide a Minimal, Reproducible Example: stackoverflow.com/help/minimal-reproducible-example — PeterKA, Jul 26 '20 at 12:11
Also, you have not stated what the problem is with your current code. — PeterKA, Jul 26 '20 at 12:14

crimsonpython24 · Accepted Answer · 2020-07-26T12:29:59.550

What I will do is to complete this action in two parts:

Display a list of buttons which sends data to the server about the choice
Return the filtered list (based on choice) back to the template

Display a list of items and then put different choices in the name attribute for the Django server to read. Note that you need to have at least two buttons otherwise it won't work. Then, return the queryset based on the user's choice. You should add this in your views or wherever you deem appropriate for handling these data.

Reference.

EDIT

Start from here. Change:

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

Then, do this to your view:

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

about the request.POST["method"] part, I can't tell you as I don't know how your data is handled (it must be one of the categories somewhere in your context) so you'll have to find out on your own, but this is how it'll look briefly in your implementation.

I am using select filed. Where should I use these buttons? Can you please implement this in my code structure or show me a complete code structure, please. — Jahidul Islam, Jul 26 '20 at 11:53

Filter table data depending on select dropdown

1 Answers1