DIsplay Nested JSON Object in different drop down list using jquery

Question

I want to display values by selecting different nested JSON Object by using Jquery.
Here is the link http://jsfiddle.net/036easd8/8/

var firstSelect = $('<select id="firstSelect"><option  >Select</option></select>');
    var secondSelect = $('<select id="secondSelect"> </select>');
      var ThirdSelect = $('<select id="ThirdSelect"> </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(data[selected]);
        $.each(item, function(item, key) {
            secondSelect.append('<option >' + item + '</option>');
        });
    });

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

 $("#secondSelect").on("change", function(e) {
        var item1;
        var selected = $(this).val();
        if (selected === "Others") {
            item1 =  data[selected];
        } else {
            item1 = data[selected];
        }

        $.each(item, function(item, key) {
            ThirdSelect.append('<option >' + item + '</option>');
        });
    });
    $("#container").append(ThirdSelect);
});

When I select "Other" from 2nd dropdown list then, in 3rd dropDown list not displaying the another JSON object. When i select "Industries" then Value should be display in textbox or any content Can any one provide me the proper solution for these issue

vikrant singh · Accepted Answer · 2014-09-18 12:31:33Z

1

    var firstSelect = $('<select id="firstSelect"><option  >Select</option></select>').appendTo("#container");
    var secondSelect = $('<select id="secondSelect"> </select>').appendTo("#container");
    var ThirdSelect = $('<select id="ThirdSelect"> </select>').appendTo("#container");
    $.each(data, function (item, key) {
        firstSelect.append('<option >' + item + '</option>');
    });
    firstSelect.on("change", function (e) {
        secondSelect.empty().append("<option value='' >select</option>").change();
        var item;
        var selected = $(this).val();
        if (selected.length > 0) {
            item = data[selected];
            $.each(item, function (item, key) {
                secondSelect.append('<option >' + item + '</option>');
            });
        }
    });



    $("#secondSelect").on("change", function (e) {
        ThirdSelect.empty().append("<option value=''>select</option>");
        var item1;
        var selected = $(this).val();
       if (selected.length>0) {
            item1 = data[firstSelect.val()][selected];
            $.each(item1, function (item, key) {
                ThirdSelect.append('<option >' + item + '</option>');
            });
        }

    });

});

DEMO

edited Sep 18, 2014 at 12:31

answered Sep 18, 2014 at 12:25

vikrant singh

2,1111 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3628181 Over a year ago

Thanks Vikrant . Could you tell me how to display the last result in some content or else in textbox

vikrant singh Over a year ago

selected content in last dropdown ???? Follow this fiddle jsfiddle.net/vikrant47/036easd8/14

user3628181 Over a year ago

Thanks Vikrant, When i select "A" from last drop downlist then it should dislplay the value associated with "A" i.e 100 in some content or text box.

user3628181 Over a year ago

Could you tell me same for "Others" when i select "others" from 2nd drop down list. Here is linkk for which i have tried jsfiddle.net/036easd8/16

Ethan Turk · Accepted Answer · 2014-09-18 12:41:25Z

Here's an example using an Object and retrieve it there. I also split your data out into a getData function for readability.

$(document).ready(function() {
    var data = getData();
    var firstSelect = $('<select id="firstSelect"><option  >Select</option></select>');
    var secondSelect = $('<select id="secondSelect"> </select>');
      var ThirdSelect = $('<select id="ThirdSelect"> </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(data[selected]);
        $.each(item, function(item, key) {
            secondSelect.append('<option >' + item + '</option>');
        });
    });

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

 $("#secondSelect").on("change", function(e) {
        var item1;
        var data = getData();
        var selectedOne = $('#firstSelect').val();
        var selected = $(this).val();
        if (selected === "Others") {
            var obj = data[selectedOne];
            item1 = obj.Others;
        } else {
            item1 = data[selected];
        }

     alert(item1);

        $.each(item1, function(item, key) {
            ThirdSelect.append('<option >' + item + '</option>');
        });
    });
    $("#container").append(ThirdSelect);

    function getData() {
        var data = {
        "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": {
            "Industries1": {
                "A": 1.38065889735545,
                "B": 0.30681308830121,
                "C": 27.9199910354101
            },
            "CompaniesImpacted1": {
                "A": 15,
                "B": 5,
                "C": 35
            },
            "AverageVolatility1": {
                "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
                }
            }
        }
    };   
        return data;
    }
});

Demo

Collectives™ on Stack Overflow

DIsplay Nested JSON Object in different drop down list using jquery

2 Answers 2

DEMO

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related