show options in select tag when a specific option is selected in other select tag from json

Question

I have 3 select tags in my HTML document , and when i select 1st option from the 1st select tag, i want to show some other options in the second select tag which is hidden, but i need to load those options from external file like json. how can i do this ?

for e.x i have this object

var object = {
    usa: {
        californina: ['san fransisco',
                       'san diego'
        ],nevada: ['las vegas', 
                    'reno']
     }
}

when i select usa option in the 1st select tag, i want to show the states (california,nevada) in the second select box, and when i choose nevada option i want to show the city(las vegas, reno) in the 3d select tag!

i want all those options to be kept in external json file! how can i load the json file?

possible duplicate of [How to populate a cascading Dropdown with JQuery](http://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery) — Helio, Aug 19 '15 at 12:52

score 0 · Answer 1 · edited May 23 '17 at 12:21

Having a json like this: {"resource":"A","literals":["B","C","D"]} and taking account you want read a external JSON file, you can follow the different answers for this post: How to read an external local JSON file in Javascript.

After you read the information that you need, you can or append the options to your(s) select(s) (What is the best way to add options to a select from an array with jQuery?) or replace all the option and append again(How to remove and replace select options using jquery?)

Probably, you want add some events to do something after the user select an option. For that, use this post jquery select change event get selected option

I hope this will help you, Best Regards

show options in select tag when a specific option is selected in other select tag from json

1 Answers1