Nested Json Object display in different dropdownlist using jquery

Question

On selecting JSON object from dropdown list the values releted to that object should display in body or textbox.

The Dropdown list control can be static or dynamic.

Suppose If i select "BFS-Retails" in dropdownlist then in another dropdownlist should display "Industries","CompaniesImpacted","AverageVolatility","Others" . when i select "Others" then in another dropdown list should display "FinancialIndustries" , "RegulatoryIndustries" , "MAIndustries" , "RestructuringIndustries" , "LeadershipIndustries" . When i select "Industries" then it should display complete values in some textbox or in body content and for all others JSON Object.

Can any one help me out with these issue using jquery Below is my json demo .

    {
   "BFS-Retail":{
      "Industries":{
         "A":100,
         "B":50.8292245629763,
         "C":81.5777678171224
      },
      "CompaniesImpacted":{
         "A":62.1621621621622,
         "B":48.6486486486487,
         "C":70.2702702702703
      },
      "AverageVolatility":{
         "A":2.62162162162162,
         "B":1.7027027027027,
         "C":1.89189189189189
      },
      "Others":{
         "FinancialIndustries":{
            "A":0.200430812566127,
            "B":0.189938259829807,
            "C":0.157663896336683
         },
         "RegulatoryIndustries":{
            "A":0.296020892405356,
            "B":0.114314693416088,
            "C":0.218004399872945
         },
         "MAIndustries":{
            "A":0.493368154008927,
            "B":0.233905449605226,
            "C":0.490509899714126
         },
         "RestructuringIndustries":{
            "A":0.140301568796289,
            "B":0.0439671897754184,
            "C":0.163503299904709
         },
         "LeadershipIndustries":{
            "A":0.499535255934039,
            "B":0.246216262742343,
            "C":0.246216262742343
         }
      }
   },
   "BFS-Commercial":{
      "Industries":{
         "A":1.38065889735545,
         "B":0.30681308830121,
         "C":27.9199910354101
      },
      "CompaniesImpacted":{
         "A":15,
         "B":5,
         "C":35
      },
      "AverageVolatility":{
         "A":0.15,
         "B":0.1,
         "C":1.3
      },
      "Others":{
         "FinancialIndustries":{
            "A":0,
            "B":0,
            "C":0.0206818181818182
         },
         "RegulatoryIndustries":{
            "A":0,
            "B":0,
            "C":0.0206818181818182
         },
         "MAIndustries":{
            "A":0.0045,
            "B":0.0025,
            "C":0.144772727272727
         },
         "RestructuringIndustries":{
            "A":0,
            "B":0.0025,
            "C":0.124090909090909
         },
         "LeadershipIndustries":{
            "A":0.018,
            "B":0,
            "C":0.144772727272727
         }
      }
   }
}

Answer 1

Here is a basic dynamic options generation code same process can be used to generate dropdown for others selection also

var firstSelect = $('<select id="firstSelect"></select>');
var secondSelect = $('<select id="secondSelect"> </select>');
$.each(data, function(item, key) {
    firstSelect.append('<option >' + item + '</option>');
});
$("#container").html(firstSelect);
$("#firstSelect").on("change", function(e) {
    var item;
    var selected = $(this).val();
    if (selected === "BFS-Retail") {
        item = data[selected];
    } else {
        item = data[selected];
    }
    $(secondSelect).html('');
    $.each(item, function(item, key) {
        secondSelect.append('<option >' + item + '</option>');
    });
});

$("#container").append(secondSelect);

fiddle link:: http://jsfiddle.net/036easd8/1/