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

用户名

我想通过使用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>');
            });
        }

    });

});

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在PostgreSQL中取消嵌套JSON对象的列表

Rails-在表单下拉列表中显示与用户相关的对象

使用模型[Angular]的嵌套对象填充选择下拉列表

使用jQuery搜索JSON中的嵌套列表

在html中显示嵌套的json对象

使用Vue.js中的唯一值填充嵌套对象数组的下拉列表

在下拉列表中显示json对象

将JSON对象数据显示到下拉列表中,角度为2?

从字典列表中创建嵌套的json对象

当表单发送的值与下拉列表中显示的值不同时,获取“选择”下拉列表的值

使用ajax json在下拉列表中显示数据

动态显示HTML下拉列表中的嵌套JSON

从逗号分隔的JSON对象中填充具有不同值的html下拉列表

在AngularJS的下拉列表中显示JSON数据

MVC在下拉列表中显示不同的表行

下拉列表显示[对象对象]而不是使用剔除的值

使用ng-options在select下拉列表中显示对象数据

在引导程序中显示动态嵌套的下拉列表

嵌套JSON,使用angularjs根据Jquery中的条件删除对象

使用jQuery或JS在不同的下拉列表选择中隐藏div

无法获取JSON中的嵌套对象列表

使用 json 为嵌套的 java 对象和列表填充下拉列表

django 中的下拉列表显示外键字段的对象

Jquery 3.3.1 从 JSON 对象填充下拉列表

使用 jQuery/JavaScript 在 HTML 页面中显示/打印一组嵌套的 JSON API 数据(列表)

使用日期对象格式化数组并在下拉列表中显示它们

如何使用嵌套对象填充 Vue 下拉列表

使用嵌套的对象数组创建多级下拉列表

在 Flutter 中从嵌套的 JSON 创建对象列表