Dynamically changing Select tag options

Question

I'm creating a website that allows a user to save a parking spot in the selected state. In the website I have a <select> that presents all the states in the U.S. then another <select> that contains all the cities in the state. My question is how do I have the 2nd <select> change it's options based on the option selected in the 1st <select> using html and JavaScript? I would appreciate any help, thanks in advance.

Answer 1

Here is an example of how you can do that with jQuery:
https://code.sololearn.com/WA11A3a7312A

Answer 2

Javascript

https://code.sololearn.com/Wsm58eJD3rmZ/?ref=app
https://code.sololearn.com/Wa5MiwC55Prm/?ref=app

Answer 3

https://code.sololearn.com/W6rqi00oXPVn/?ref=app

Answer 4

James Vanmeter,
Try using "element.val('val')" to populate the second <select>

Answer 5

I don't use VSC, so I got nothing to say about it.

Try to load the code in a standard web browser to see whether either one of the codes posted here works. If it works as expected, then *perhaps* it has something to do with VSC. Though, I kinda doubt VSC will be having problem processing basic codes like these.

Answer 6

I tried all of these examples and I'm still having the same issue, but now I'm pretty sure it's not the code. I'm developing in visual studio code, when I tried using the code everyone presented, I copied and pasted to visual studio just to see if it would work. 1st <select> always works, 2nd <select> remains blank no matter what. I know my JavaScript is linked correctly because my other functions are working. What do you guys think I'm wrong?

Answer 7

james vanmeter try to git push the code to GitHub, and share the git clone link here. So that we can reproduce your problem in our VSC.