Skip to content
Advertisement

Dynamic fill dropdown list with depedent JSON files using JQuery

I have 3 dependent JSON files that are related together, which are countries.json, states.json and cities.json and i want to fill 3 dropdowns select box with those json files i have. For the first time i select a country in the first dropdown, i see its states in the second dropdown but the problem comes when i select another country, its states come with the states of the previous selected country.

JavaScript
JavaScript

JavaScript

How to solve this problem? i have tried so far, i think the error is in the JQuery loop function $.each(data, function(key, state){});

Advertisement

Answer

$.getJSON('states.json', function(data){ stateOptions +=

This is appending to your existing data when you get new data. Change it to this:

$.getJSON('states.json', function(data){ stateOptions =

JavaScript
JavaScript

Note The code snippet is just for OPs sake. It won’t run because it utilizes Get requests.

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement