Question

这是我的JSON文件：

{
        "AL2": {
                "3810": "AL2GR1",
                "3814": "AL2GR2",
                "3815": "AL2GR3",
        },
        "AN3": {
                "3818": "AN3GR1",
                "3819": "AN3GR2"
        },
        "CME": {
                "2405": "CME"
}

我需要填充两个选择框。第一个让我们在第一级值（AL2，AN3，CME）和第二级值（AL2GR＃，AN3GR＃，CME）之间进行选择。

我的infile Javascript是：

var jsonData = {"AL2": {"3810": "AL2GR1","3814": "AL2GR2","3815": "AL2GR3"},"AN3": {"3818": "AN3GR1","3819": "AN3GR2"},"CME": {"2405": "CME"}};

$(window).load(function(){
  $.each(jsonData,function(key, value) {
    $('#ue').append('<option value=' + key + '>' + key + '</option>');
  });
});

function grfromue(element,jsonData) {
    var ue = $("#ue option:selected").text();
    alert(ue);
    $.each(jsonData[ue],function(key, value) {
    $('#gr').append('<option value=' + key + '>' + value + '</option>');
  });
};

和HTML：

<select id="ue" onChange="grfromue(this,jsonData);">
</select>
<select id="gr">
</select>

第二个选择框没有改变，我做错了什么？

Answer 1

以下代码段可能对您有所帮助

var json = {
            "AL2": {
                    "3810": "AL2GR1",
                    "3814": "AL2GR2",
                    "3815": "AL2GR3",
            },
            "AN3": {
                    "3818": "AN3GR1",
                    "3819": "AN3GR2"
            },
            "CME": {
                    "2405": "CME"
            }
    };

获取第一级的每个值

$.each( json, function( key, value ) {
    console.log( key  );
});

根据您的第一个输入获得第二级值

input = 'AL2';
$.each( json[input], function( key, value ) {
    console.log( key + ' : ' + value  );
});

希望这会对你有所帮助。

Answer 2

您可以使用嵌套的JQuery每个方法迭代对象及其中的嵌套对象。您可以根据需要为多个嵌套对象扩展它。

jQuery.each(obj, function(i, val) {
    console.log("Object: " + i);
    jQuery.each(val, function(j, value) {
        console.log('It has ' + j + ' with value ' + value);
    });
});

如果要根据第一个选择框的值填充第二个选择框，可以使用数组表示法来获取对象的内容。像这样：

jQuery("#selec-id").change(function(){
    $("#second-select-id").html("");
    jQuery.each(obj[$(this).val()], function(key, value) {
        $("#second-select-id").append("<option value='"+key+"'>"+value+"</option>");
    });   
});

填充两个从JSON中选择

2 个答案: