使用jQuery在不同的下拉列表中显示嵌套的JSON对象

debugcn 发表于 Dev

用户名

我想通过使用Jquery选择不同的嵌套JSON对象来显示值。
这是链接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);
});

当我从第二个下拉列表中选择“其他”时，在第三个下拉列表中不显示另一个JSON对象。当我选择“行业”时，值应显示在文本框中或任何内容中，任何人都可以为我提供针对这些问题的正确解决方案

维克兰特·辛格

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

    });

});