使用jQuery在不同的下拉列表中显示嵌套的Json对象 [英] Nested Json Object display in different dropdownlist using jquery

问题描述

从下拉列表中选择JSON对象时，重新命名为该对象的值应显示在正文或文本框中.

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.

假设 如果我在下拉列表中选择"BFS-Retails"，则在另一个下拉列表中应显示"Industries"，"CompaniesImpacted"，"AverageVolatility"，"Others".当我选择其他"时 然后在另一个下拉列表中应显示"FinancialIndustries"，"RegulatoryIndustries"，"MAIndustries"，"RestructuringIndustries"，"LeadershipIndustries".当我选择行业"时 它应该在某些文本框或正文内容以及所有其他JSON对象中显示完整的值.

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.

有人可以使用jquery帮我解决这些问题吗? 下面是我的json演示.

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
         }
      }
   }
}

推荐答案

这是基本的动态选项生成代码，相同的过程可用于为其他选择生成下拉列表

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);

小提琴链接:: http://jsfiddle.net/036easd8/1/

这篇关于使用jQuery在不同的下拉列表中显示嵌套的Json对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！