Django Dependent/Chained Dropdown List in a filter

Using Django Templates & Frontend
1

I am using Django to implement my web page; in this page I have a classic item list that I manage with a for loop. I also implement a filter as a form (with search button) to filter the items.

I know how can I implement a dropdown list (first code) and I know how can I implement a form filter (second code).

DROPDOWN LIST (JQUERY CODE)

    <script>
        $( document ).ready(function()
        {
            var $provvar = $("#provddl");
                $uffvar = $("#uffddl");

                $options = $uffvar.find('option');
                $provvar.on('change',function()
                {
                    $uffvar.html($options.filter('[value="'+this.value+'"]'));
                }).trigger('change');           

        });
    </script>

FORM FILTER

    <form>
        <div>
            <label>C: </label>
                {{ myFilter.form.C }}
        </div>
        <div>
            <label>D: </label>
                {{ myFilter.form.D }}
        </div>

        <button type="submit">Search</button>
    </form>

My problem is that I don’t know how can I implement a the Dependent Dropdown List in my filter.

2

This appears to be more of a JavaScript issue than a Django issue. How does Django fit into this picture?

1 Like
3

Yes, but my app is totally implemented with Django. For this reason, I am trying to find a solution for implement a Dependent Dropdown List in my filter.
I read that exist an unmaintained library (Django-smart-selects) that contain one interested thing: “ChainedForeignKey”. Do you advice me this solution or do you have another solution?
Thank you in advance.

4

Given how you’re trying to integrate this with other JavaScript code, I’d suggest a “roll-your-own” solution.

Basically, you can register an on-change event handler for the first select box. That handler can then call a Django view using AJAX. The Django view returns the select options for the second drop down. The handler uses that response to alter that select box on the page.

While I may not recommend using Django-smart-selects in your case, you might want to read the code to understand what it’s all doing.

Again, the bulk of this work is the JavaScript. The only Django involvement here is a view to accept the request for the second select box and return the corresponding entries.

1 Like
5

In addition to what Ken said, if the number of possible combinations for the chained dropdown is small, maybe you can also output all combinations in advance in the template. That is, have the template generate the JavaScript code portions that contain all data that the on-change event handler needs to do its job.

This at least reduces the complexity if you want to keep the overall JavaScript code simple and small: There is no need for AJAX at all. It does not work though if the number of combinations is too large or too flexible.

1 Like
6

I finally solved it with this tutorial: Cascading Dropdown with Bootstrap - YouTube
With this tutorial I also could add more than two selects for my dropdown chained list.

Yes, you were right…this is a html/css/javascript problem more than Django problem.

1 Like