Django and HTMX #10 - Chained Dropdowns with Django and HTMX

In this video, we will implement a dependent (or chained) dropdown using HTMX and Django. This will allow us to make the choices in one dropdown contingent on the selection made in another dropdown.

We'll work with an example that uses a set of university courses, each of which have their own modules. The selected course should determine the set of modules available in the second dropdown.

HTMX's documentation refers to this as "cascading selects".

▶️ Full Playlist:

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
01:14 Creating database models
02:58 Creating management command to populate database
04:23 Adding URL, view and templates
06:01 Adding Select Elements (Dropdowns)
07:39 Adding HTMX Attributes

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #htmx #python

[jjssam]

I really like the way you describe the details step by step just in case newcomers don't understand what you are talking about. I am learning much more than just HTMX here. Thanks a lot!

[trosgate]

Just landed on your tutorial and never felt like giving a break. This is amazing and we love it

[seydinaoumarsamabaly]

You really are a genius ! You exactly know what do people need at the right moment. Just Great !

[FirdausAziz]

Excellent. Was waiting for this. Very clear and understandable. Bookmarking all your HTMX tutorials for quick reference.

[amine]

I definitely need to check all your videos. Your turotials are exceptionally great. Thank you again.

[alexxx]

Merci tu m'as beaucoup aidé grâce à toi j'ai avancé dans mon projet quand on débute la programmation c'est pas évident, tes expliquations sont claires avec la traduction en francais.

[robhafemeister]

Great tutorial, so much easier and cleaner than JQ. Your videos are awesome!

[mikedodds]

Doh ... have spent a long time with my " friend" Google trying to work out how to do this.. should have saved myself a lot of time and come here 1st .... great stuff and excellently presented

[larsulvaer]

Fantastic! I am stunned. Thank you so much!

[Hohihiho]

thank you bro a looot saved me on me dead line god bless you forever <3

[jimmaloy]

Excellent presentation. The example is as streamlined as possible, and the step-by-step narration & explanation through the development process is very helpful. My only suggestion, the example would be clearer if the object naming were more distinctive. E.g. instead of just "course" or "courses" being re-used as the id for the select control, and the context dictionary key, and the View function name, and the course object collection, and so on -- have distinct naming for each type of object. "course_selection", "course_listing", "courses_view", etc. With so many similarly-named objects it is easy for a novice to be confused.

[axelb.]

How could I have spent tons of JS (Ajax) lines of code until now ? It's because I hadn't seen yet your HTMX videos :P. Thanks

[ggsgetafaf]

I very like your tutorial about html, alphine combine with django. thank

[duckduckgo-bmxs]

I want to know when you create Management folder how ?

[nathanpinel]

Fantastic tutorial, I have been using this series extensively for project work. Do you know if it is possible to add htmx attributes to a select2 serchable select input?

[princebhagat]

hello sir,
i'm facing problem in setting up all the configuration and changes that has to be done for using *smart_select* for *ChainedForeignKey* . like what has to be added to the various file of the project app.
your help will means a lot for me.

[yousefpahang]

Great ! what if I have a table and how can I update the select on that row only, name will change only the first row select

[bilal-zafar]

Brother i face an issue that, my first dropdown created as it is in second line. Mean if i use 2 dropdowns and select from first dropdown then a new dropdown auto added below first select.

[kadirzorlu]

hello, i am trying to do chained multi select, i can't get multiple value, can you help me?

[pareshpandit]

This looks like the most efficient approach to achieving dependent dropdowns in Django, with the least amount of coding confusion, imho. So, thank you! :)

Now, I have a similar query / requirement to what Mr. @Peter Holzer discusses in earlier comments - What if you have chained multiple dependencies. The most common example would be something like an Address Form, like Mr. Holzer says; viz. 'Country > State > City', right?

Also, at that, suppose that I have pre-defined (and filled) Tables in my database wherein I am dumping the regions' data from somewhere else, and am making sure that it is chained between itself by a Key, or some reference-able table Field (for eg. CountryName in State, and StateName in City, etc.) -- does this change anything? How to call a 2+ fields dependent-dropdown from such a table, most ?

Last but not the least (since I have already introduced "complexity" in my queries here :D ), what about when I want to have the least-to-none code in my HTML Template, and am using CBVs? Any tips on this, would also be much appreciated!

Many thanks in advance, for your kind attention and guidance. :)