如何使用jquery从多维json数组中提取值以基于第一个下拉列表的选定值填充第二个下拉列表？

Question

我有一个生成json数组的php文件，并将此json数组写入文件results.json

$jsonData = file_get_contents("/json/results.json");
$jsonDataObject = json_decode($jsonData, true);

<script>
var jsonObj = '<?php echo $jsonData;?>';
alert(jsonObj); //Produces the following output

{"cisco":["Port1/1","Port1/2","Port1/3"],
"Juniper":["Port2/1","Port2/2"],
"Huawei":["Port3/1","Port3/2","Port3/3","Port3/4"]
}

我想从此数组构建两个下拉菜单，第一个下拉菜单应单独包含键，如cisco，juniper，huawei等。

我使用以下代码进行了此操作：

<?php 
foreach($jsonDataObject as $key => $value)
{ 
?> 
<option value="<?php echo $key; ?>"><?php echo $key ; ?>
</option> 
<?php } 
?> 

我需要在'，'上拆分每个键的值，然后使用jquery将它们分配给另一个下拉列表。我被困在很长一段时间内，我知道已经问过许多与此类似的问题。相信我，我已经尽了最大努力，但是我仍然坚持，我不想使用ajax做到这一点。我想在第一个下拉列表的change事件上使用jquery做到这一点。

任何帮助对此表示感谢。

Answer 1

$ .each（jsonData，function（key，data）{...}）

Answer 2

给选择一个ID：

<select id="select1">
    <option value="cisco">cisco</option>
    <option value="Juniper">Juniper</option>
    <option value="Huawei">Huawei</option>
</select>

<select id="select2">
</select>

然后，您可以使用以下代码：

function updateSelect() {
    var newKey = $("#select1").val();
    $("#select2").empty();

    if(newKey in jsonObj) {
        var tmp = jsonObj[newKey];

        for(i = 0; i < tmp.length; i++)
        {
            $("<option>")
                .attr('value',tmp[i])
                .html(tmp[i])
                .appendTo('#select2');
        }
    }
}

$(document).ready(function() { 
    $("#select1").change(updateSelect);
    updateSelect(); // For initial page load.
});

见小提琴