HTML JavaScript Dependent Dropdown List, Cascading Unlimited Levels - e.2 p.1

Learn how to create dependent dropdown select menus in HTML using JavaScript. We'll start with a basic one and then 2 level dependent dropdowns that will apply the array onChange event and then we'll create a DropDown Class that will allow us to create as many dropdowns and as many levels as we want.

Babel JS

HTML & JavaScript Fundamentals

JavaScript Array Methods

#HTML #JavaScript #Dropdown #Dependent #Cascading

[apoorvpurohit]

As soon as I saw a video of 1.5 hours, I pushed everything else from the table and got my headphones from my work computer and connect to my personal computer and watching this video like I used to watch Winnie the pooh as a child! 😂

[Meljuulie]

Thank you for this video! At first I was a little bit annoyed that you didn't post a link to the complete code so I could just copy past it, but after watching your video I'm glad this wasn't an option. Now I know what I'm doing and I'll be able to do this myself next time :). Much love!

[georgenicholson]

That was heavy! But excellent, as usual. I'll need to let this one marinate a bit.

Also, related to a request made above (but in the opposite direction), would there be enough interest for you to consider a follow-up video showing how to populate these dropdowns via an Apps Script web app as a REST API serving JSON?

I typically don't like to make requests like this and I realize that might be a niche case, so if you don't think there'd be an audience, I completely understand.

But thank you again for the invaluable content!

[fartmaker]

Just the video i needed! And the way you explain, marvelous!

[i_am_hugeng]

You are the true teacher!
This is what I'm searching for a long time.
Thank you very much.
You've got my subscribe.
Don't stop making javascript content for web apps feature. 🙏

[rizqiprayogae]

Nice video, easy to understand for a newbie.

Is there a feature after choosing the dropdown, it show button box that hyperlink us to other page that give us information about the choosen car?

[iftikharhussain]

I have tried the first method. Since i have applied this coding for a bit different application so when there is only one option in level2 then it does not populate the available option to level3. There is no option in level3. Can you please help me sort it out? @get_it Done!

[refurbi]

This was really really helpful. Thank you!

[DG-cdjb]

Hi. It’s very informative. I have a usecase to auto populate city-state-country values by making an ajax call to city-list api from the frontend user enrollment form, after user enter a postal code. We have to populate city, state and country if there is a single response. If the Google api provides multiple cities and countries for same zip code, we should populate those city and country in the dropdown, state will be auto populate based the city selected by a user.
Any helpful references and thoughts on this scenario ?

[ibsegaming]

Can u help us achieve the same while retrieving values in the drop downs through a database?

[MrKrylou]

Does that code shared somewhere so I can download and play with it?

[kingzofmobilemechanics]

Hey, I was wondering if I could pay you to do something very similar to this for my website?

[kvarkent]

please tell me how to make the next list to be displayed after selecting a value

Example: all hidden except the first.
selected Audi, show next select

t.y

[abdeldiouf]

Awesome JOB!
BUT
How do you add event listeners upon changes in values for different levels?
When I add a event listeners upon changes on the first level it seems to work but on the second level, I get a Uncaught ReferenceError...
Thanks

[nocpati]

How to split that Array to be value and item wich is displayed? Please?

[stathissamaras]

Hi, thank you very much for published your knowledge .i really appreciate that.I am trying this in my project home.html and get return error on console "Failed to load resource: the server responded with a status of 404 (Not Found)" . can you imagine why that happens?

[refurbi]

I have a question, how would you go about giving the first option of the dropdown these properties 'disabled selected hidden' taking into account that the options list resets every time you select an upper option...

[newnam]

It's a great video, but how does it produce filtered content. This only shows how to use one menu against another, but what about producing actual filtered products or content.

[daidensacha]

Hi, I really enjoyed your presentation. Really inspiring for someone learning and aspiring to move into coding. I worked along with your tute, as I have been developing a responce toolbar for a ticketing system. Three selects, slct1: Department, slct2: responce category, slct3: individual responces. Fourth row in my array is the full responce that I want to insert into a variable that I can use when adding correspondence. Can you point me to when I might be able to add an if statement into the code so instead of using the data from the fourth select, that i can store in in the variable?
Really apprecate your lessons.

[amengaga]

Hi! Why am I getting cannot read property 'appendChild' of null? Please help me