Populate multiple select options with Json

Populate multiple select options with Json

What i want to achieve
I have got one static select html options, these options do not change but will determine what the other select boxes output.

  1. <select id="firstselectbox">
  2. <option value="first">This is the first</option>
  3. <option value="second">This is the second</option>
  4. <option value="third">This is the third</option>
  5. <option value="fourth">This is the fourth</option>
  6. <option value="fifth">This is the fifth</option>
  7. </select>
Currently, the code i have written doesnt want to output the following:

Select 1: option selected first

Select 2: checks jSon file, finds first and all of the nodes (second layer) and list them. When a user selects that.

Select 3: displays the third layer

Please note the * is the option selected below - select 1 is static and select 2 and 3 are dynamic.

Select 1      Select 2         Select 3
first*            London          Famous Famous
second       Jersey            London Famous
third             North*
fourth           South East
fifth              South West
sixth 
 
What have i done so far
  1. var datajson = {"first":[{"jesery":[{"id":"jesery","name":"Jesery","jesery":[{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"second":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"third":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}]}],"forth":[{"north":[{"id":"north","name":"North","north":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"dontknow":[{"id":"dontknow","name":"Dont Know"}]}],"fifth":[{"london":[{"id":"london","name":"London","london":[{"id":"f2f","name":"London Famous"},{"id":"famous","name":"Famous Famous"},{"id":"distance","name":"Distance"}]}],"southeast":[{"id":"southeast","name":"South East","southeast":[{"id":"distance","name":"Distance"}]}]}]}

  3. $("#firstselectbox").on('change', function() {
  4. $("select#firstselectbox").html('');
  5. var locations = datajson[$(this).val()];
  6. var locationString = '';
  7. $.each(locations, function(i, item) {

  9. console.log(locations[i]);

  11. locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">' + locations[i].name + '</option>';
  12. });
  13. $('#secondselectbox').html(locationString);
  14. });
Issue?
The following code is locationString += '<option id="'+ locations[i].id + '" value="' + locations[i].id + '">' + locations[i].name + '</option>'; is outputting unidentified.

However console.log(locations[i]); is outputting the array that that is selected from the static select box (first, second etc..). However, trying to separate that out seems to fail.

The current code is outputting unidentified.