如何使用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.
});

見小提琴