These tutorials are so well done! The content is quite useful, but your delivery and animations are what really sets them apart; clear, concise, easy to follow. Thank You!
Farout. Saw this on "recommended" last night and could not find it today. And it came up again. Am getting fairly comfortable with JS and this with the sidebar will help me apply these many hours of study. Really appreciate it. And marked the link you shared above.
This tutorial is still helpful in 2022. Thanks. And thank you for keeping the lesson code available on your website. I had an error preventing javascript from completing. I want to find my error, it's helpful to know that running your code works.
Dear Adam, I have never had such a good and easy-to-understand lesson... At last, I understand how this so important matter works.... A HUGE Thank you, from Brussels !.... I'll have a look at your other videos...
Great tutorial. Exactly what I needed and I like the way you added what was going to be in it at the start. I hate watching a whole video and getting to the end and it hasn't answered what I was looking for.
It's 2018 and this video is still helpful, thank you a lot. What I need is to pull the data from a db table each time the option changes in the first dropdown list, but after watching this I know I can do it myself. Thank u very much.
just when it seems like all hope is lost, I come across this video... thanks a mil mate. you just saved me after two hours of watching other useless videos. It's now 2.22am *sighs*
Hi Adam, a great tutorial thanks. I had been trying to do this for ages! Are you able to do a 2nd video showing how to modify the code for the first video to add 3 drop downs ? Also, a 3rd tutorial showing how this code could be changed to load it's selections from a database would be brilliant. Thanks again, Luke.
First let me say how much I appreciate your videos especially after wading through all the entries posted by people who are either unable to speak (who knows, maybe they don’t have microphones or sound cards) Or their English is Sooo heavily accented as to be entirely unintelligible. Simply a useless waste of time. Your videos on the other hand are great, absolutely the best. Not only that, but your code works. I love it. OK, I’ve been wanting to tell you that for some time. Now to the main point of my comment which is to ask if it may be possible to expand on this video to demonstrate how to save the result of this to a database. It would seem the logical goal to save the “pair” to a variable that can be used elsewhere i.e. like send to DB.
Thanks a lot! really good tutorial. the one thing i changed is to use a two dimensional array rather than doing the split workaround. so my optionArray looks like this [["value1","name1"],["value2","name2"],["value3","name3"]] and i access it by newOption.value = optionArray[option][0] and newOption.innerHTML = optionArray[option][1] just because i think its a little bit prettier that way. EDIT: i also just removed the need for endless if statements. my complete code now looks like this: let array1 = [["value1","name1"],["value2","name2"],["value3","name3"]]; let array2 = [["value1","name1"],["value2","name2"],["value3","name3"]]; let lists = {array1, array2}; function populate(value) { $('#id').empty(); console.log(value); let options = lists[value]; console.log(options); for (let option in options) { let newOption = document.createElement("option"); newOption.value = options[option][0]; newOption.innerHTML = options[option][1]; $('#names').append(newOption); } };
I managed to do the third drop down, just make another function by name of populate2 and in the second drop down menu call that function and send the value to the function using id of the third drop down box, Adam thanks a lot for the great tutorial :)
Can you please make a demo on how to make a 3rd Select option being populated from the 2nd - when i try it with the onchange populate on the 2nd select i get the options from select 3 in the fields where option 2 should be (Hope that makes sence) Many thanks
@@fezanrasool2559 Can't figure out how to make multi-level dependent select (for example Country > region > district > etc) without using jquery. Is it possible?
Thanks for this tutorial, what if we need to dynamically populate select elements three levels deep, also is it possible to populate a value on the third level dependent on a specific value in level 2 ? use case : Campus (Level 1) > Building (Level 2) > Room No (Level 3).
This is great and it really helped me out. Is there a way to add more drop downs without using a database? I know this tutorial is old but I just need to show a concept for a menu system and I would like to use something like this. Any information would be greatly appreciated. Thank you.
You'll require ajax to get the data from PHP. You can do it 1 of 2 ways. After querying the db for the data 1. You can create the html in PHP while looping through the fetched data and returning it to JS, then have the returned html added to the select box or 2. You can json encode the data in PHP and return it to JS, json decode and create the html option elements similarly to what Adam did when he created the options based on the array visit: pastebin[.]com/A8P6Jiqf
I really like your tutorial. This is really helpful. But what if I would want to add third dropdown. For example, After I choose the "Car Model" , in the third dropdown there should be an option for it.
Hello adam it's really helpful for me Will you please make a video on how to populate a country state and city drop-down & fetch that values from mysql database using javascript Thanks.
Great tutorial man I needed this for a form I am currently working on. Anyway you can show us how to send this information in an email after user hits submit?
Adam, please if you will have time in the future, can you add a second part on this video and show us how to keep values in dropdown lists, after form submision?
First of all, I have to say, your tutorial are awesome. I'm currently learning JavaScript and they help me alot in my project. Now here's my question, is it possible to hide the first empty value we clicking on the dropdown menu? Thank you again and continue your great job!
I was wondering if I would still do it this way now we have in-built templating in JS. Perhaps I would create the 3 select elements based on the dataset, then toggle their visibility based on the choice in the parent select element.
Quick question with these lines of code for javascript. Lets say I have a a 2 drop down form with the following and a submit button. 1st drop down - 2 options (vancouver, whistler) 2nd drop down - 3 options (hard, intermediate, easy) Submit I have 6 activities pages for each vancouver and whistler. I have set each of the activities a value of hard (x2), intermediate (x2), easy(x2). What what you taught us here work if I press submit and it brought up a page with the recommended activity from the options selected in the drop down menus. Example. Vancouver-picked Hard-picked submit. Than i set a value of hard to skiing in vancouver and whistler. So only the activities have a value. Would this sort of code work?
Hello Adam, Thanks for the Great Tutorial...Can you please tell as to how I can select multiple values in the drop down going by the same process as in the video.
Thank you for a video! Everything works apart that model shows only 2nd character from a its name, Audi A3 would show up as 3 and nothing before or after it, Kia Sportage for example is only "p"-I do not know where is my mistake?
nice video sir.But one think is that u show 2 option but i want create 3 option last one depend the previous one and the second one depend the first one..on what the way? sorry for bad english?
These tutorials are so well done! The content is quite useful, but your delivery and animations are what really sets them apart; clear, concise, easy to follow. Thank You!
Farout. Saw this on "recommended" last night and could not find it today. And it came up again. Am getting fairly comfortable with JS and this with the sidebar will help me apply these many hours of study. Really appreciate it. And marked the link you shared above.
I really feel compelled to say how grateful I am. Great tutorial, easy explanation. Big up fella. Keep up the good work.
This is a great dynamic form tutorial but for everyone having problems with this tutorial working for you, place the 's inside tags.
This tutorial is still helpful in 2022. Thanks. And thank you for keeping the lesson code available on your website. I had an error preventing javascript from completing. I want to find my error, it's helpful to know that running your code works.
This helps a lot in 2020
Just getting back into creating some sort of webpage, something I haven't done since the 90's, pleased to find this...
Today, this video helped me for my college thesis project. Thanks!
Dear Adam,
I have never had such a good and easy-to-understand lesson...
At last, I understand how this so important matter works....
A HUGE Thank you, from Brussels !....
I'll have a look at your other videos...
Adam this is why you're a teaching Guru. Wish I could provide content anything like yours
Thank you Adam. I found your explanation very clear , very concise and enjoyable to listen to - well done.
Great tutorial. Exactly what I needed and I like the way you added what was going to be in it at the start. I hate watching a whole video and getting to the end and it hasn't answered what I was looking for.
It's 2018 and this video is still helpful, thank you a lot. What I need is to pull the data from a db table each time the option changes in the first dropdown list, but after watching this I know I can do it myself. Thank u very much.
Super powerful technique and great presentation! So glad to have found your tutorials! Thank you sir!
It's 2019 and yet it was so helpful. Thank you so much sir!
Two thumbs up! Just what I needed to complete a python project that interacts with web pages. Thanks much.
This guy is world-class. Thanks!!!!
just when it seems like all hope is lost, I come across this video... thanks a mil mate. you just saved me after two hours of watching other useless videos. It's now 2.22am *sighs*
no joke he is a living legend i love you 3000, thanks buy, bruh! from 2021, things are nuh on the trackkk
thank you so much man using this for the dissertation website I'm building in Laravel 8 and tailwind, thanks man it really helped
this is still useful in 2022 awsome
Hi Adam, a great tutorial thanks. I had been trying to do this for ages! Are you able to do a 2nd video showing how to modify the code for the first video to add 3 drop downs ? Also, a 3rd tutorial showing how this code could be changed to load it's selections from a database would be brilliant. Thanks again, Luke.
First let me say how much I appreciate your videos especially after wading through all the entries posted by people who are either unable to speak (who knows, maybe they don’t have microphones or sound cards) Or their English is Sooo heavily accented as to be entirely unintelligible. Simply a useless waste of time. Your videos on the other hand are great, absolutely the best. Not only that, but your code works. I love it.
OK, I’ve been wanting to tell you that for some time. Now to the main point of my comment which is to ask if it may be possible to expand on this video to demonstrate how to save the result of this to a database. It would seem the logical goal to save the “pair” to a variable that can be used elsewhere i.e. like send to DB.
Thanks for the kind words Ron. Makes me feel good about making these videos.
This is amazing! Finally got JS to do exactly what I needed it to do.. Thanks so much Adam
Adam, Excellent Video. Valuable information, clearly presented. Very fine teaching. Thank you.
thanks ,you saved my 21 anniverssary,Now i know how to solve my problem and I can go in the Club
Great tutorial! Really clear and easy to follow. You speak very clearly and simply which makes it really easy to follow along. Cheers
Nice and simple to understand, thanks
Thank you so much... bless you brother. keep doing what you do.
detailed and to the point explanation.Thanks
All your tutorials are the best. Great code and easy explanation. Thank sir !
GOD BLESS YOU MAN!! YOUR ARE MY SAVIOR!! YOUR HAVE SAVE MY ASSIGNMENT WORK!!
You saved my lives bro! finally i found this tutorial, ty - GBU
It seems all my confusions can be cleared by you. Thank you.
Thanks a lot! really good tutorial. the one thing i changed is to use a two dimensional array rather than doing the split workaround. so my optionArray looks like this [["value1","name1"],["value2","name2"],["value3","name3"]] and i access it by newOption.value = optionArray[option][0] and newOption.innerHTML = optionArray[option][1] just because i think its a little bit prettier that way.
EDIT: i also just removed the need for endless if statements. my complete code now looks like this:
let array1 = [["value1","name1"],["value2","name2"],["value3","name3"]];
let array2 = [["value1","name1"],["value2","name2"],["value3","name3"]];
let lists = {array1, array2};
function populate(value) {
$('#id').empty();
console.log(value);
let options = lists[value];
console.log(options);
for (let option in options) {
let newOption = document.createElement("option");
newOption.value = options[option][0];
newOption.innerHTML = options[option][1];
$('#names').append(newOption);
}
};
I managed to do the third drop down, just make another function by name of populate2 and in the second drop down menu call that function and send the value to the function using id of the third drop down box, Adam thanks a lot for the great tutorial :)
could u explain further. I really need this
Saquib Baqai can you expand? Or share the code you used
you saved my life lol.. i implemented it in spring mvc form easy. thank you so much. keep it going
Can you please make a demo on how to make a 3rd Select option being populated from the 2nd - when i try it with the onchange populate on the 2nd select i get the options from select 3 in the fields where option 2 should be (Hope that makes sence)
Many thanks
just put the second on change and call function
@@fezanrasool2559 Can't figure out how to make multi-level dependent select (for example Country > region > district > etc) without using jquery. Is it possible?
this is exactly what I was looking for... awesome.. good job..
Thank you bro ! Great tutorial
fruitful video... I got what I needed ...you are fabulous
Hi, thanks for the video, it was very useful to me. Very well done.
I was actually getting crazy with this, thank you very much mate
The pair part, is it necessary?
What happened if i use the same string on value and label?
Great video...love the step by step explanations...made understanding everything kiddie play :)
THANK YOU..!!! it is more helpful and easy to understand......
GREAT tutorial ... one thing though: the "avanger" word man ;-) ... But the tutorial was exceptional.
Thanks for this tutorial, what if we need to dynamically populate select elements three levels deep, also is it possible to populate a value on the third level dependent on a specific value in level 2 ? use case : Campus (Level 1) > Building (Level 2) > Room No (Level 3).
It was a great tutorial and it really helped me to complete my task...Thanks a lot :)
Am so great to allowed this tutos thanks
Thanks for the video
I have a question: I want to add third select option (Dynamic one) depends on the second select option
How can I do it ?
This is great and it really helped me out. Is there a way to add more drop downs without using a database? I know this tutorial is old but I just need to show a concept for a menu system and I would like to use something like this. Any information would be greatly appreciated. Thank you.
Very good article, I immediately implemented it. but what is the trick for large choices, for example cities in a province?.
Thanks Adam, it did help me a lot. Thanks again.
You'll require ajax to get the data from PHP. You can do it 1 of 2 ways.
After querying the db for the data
1. You can create the html in PHP while looping through the fetched data and returning it to JS, then have the returned html added to the select box or
2. You can json encode the data in PHP and return it to JS, json decode and create the html option elements similarly to what Adam did when he created the options based on the array
visit: pastebin[.]com/A8P6Jiqf
still helps in 2020!! thank you
Nice video, great explanation, simple approaching. 10/10. Thank you so much.
I really like your tutorial. This is really helpful. But what if I would want to add third dropdown. For example, After I choose the "Car Model" , in the third dropdown there should be an option for it.
Hello adam it's really helpful for me
Will you please make a video on how to populate a country state and city drop-down & fetch that values from mysql database using javascript
Thanks.
Thank you so much adam your a legend glad to have found your channel!
Hey! your video was really helpful! thank you so much.
Great tutorial man I needed this for a form I am currently working on. Anyway you can show us how to send this information in an email after user hits submit?
Me watching in 2021 after getting first job 😂😂 thank you and respect++ sir to the dot a-z what I needed thank u
Adam, please if you will have time in the future, can you add a second part on this video and show us how to keep values in dropdown lists, after form submision?
I've been waiting for this tutorial for a long while now!
Thank you very much!
First of all, I have to say, your tutorial are awesome. I'm currently learning JavaScript and they help me alot in my project. Now here's my question, is it possible to hide the first empty value we clicking on the dropdown menu?
Thank you again and continue your great job!
yes, no need to put an empty value option.
great explanation sir!!
Love your Tuts! You make learning Javascript so EASY!! Thank YOU!! Keep them coming :)
fantastic tutorial!!! Exactly - to the dot - what I needed for one of my forms!
Oh and BTW I did want to say this particular video was especially good. Thank you so much for your efforts. Hope you keep doing what you do.
Amazing tutorial brother! Cheers.
congratulation Adam, excellent tutorial. thanks
This is still very usefull in 2019!
I was wondering if I would still do it this way now we have in-built templating in JS. Perhaps I would create the 3 select elements based on the dataset, then toggle their visibility based on the choice in the parent select element.
Great video!! If you wanted to add a price to the s1 options then have it appear on a different line is that possible?
Quick question with these lines of code for javascript. Lets say I have a a 2 drop down form with the following and a submit button.
1st drop down - 2 options (vancouver, whistler)
2nd drop down - 3 options (hard, intermediate, easy)
Submit
I have 6 activities pages for each vancouver and whistler. I have set each of the activities a value of hard (x2), intermediate (x2), easy(x2).
What what you taught us here work if I press submit and it brought up a page with the recommended activity from the options selected in the drop down menus.
Example.
Vancouver-picked
Hard-picked
submit.
Than i set a value of hard to skiing in vancouver and whistler. So only the activities have a value.
Would this sort of code work?
very simple concept and good video :)
Thank you so much!!! You are a life saver. I really liked this tutorial!
Thanks its very useful for me.
Cheers man! really good tutorial, very clearly explained.
Thanks a lot for sharing this amazingly clear tutorial !!
Hello Adam, Thanks for the Great Tutorial...Can you please tell as to how I can select multiple values in the drop down going by the same process as in the video.
Great video's Now I just have to work out how if you select a radio button it gives you two other list with different $ values then add them thanks
Very good explanation but I want output side by side it looks more effective
thank you.. sir ... you are great . method you fellow to teach is best
it really works! thank you for your super detailed explanation! it really helped me! Thank You!
Thank you for a video! Everything works apart that model shows only 2nd character from a its name, Audi A3 would show up as 3 and nothing before or after it, Kia Sportage for example is only "p"-I do not know where is my mistake?
very Good Tutorial.Can you tell me how to add link to external webpage when you select an second option thanks :)
Awesome tutorial Adam, thanks again.
Thanks, it successfully works.
Great video, just what i needed!
A life saver. Thanks
Thank you sir, It helps lot
Great video man! this tutorial really helped me.
Great Explaination Sir.!
Bro, this really helped me out! Thanks alot!
Nice tutorial. Thanks.
Excellent Sir
Thanks you so much very nice video
Great Tutorial Thank you very much sir!!!!!!!! Lub u
Excellent!!!, helped me a lot
Thanks a lot bro :-) you just saved my ASSS!!!!
nice video sir.But one think is that u show 2 option but i want create 3 option last one depend the previous one and the second one depend the first one..on what the way?
sorry for bad english?