在JavaScript中使用php數組填充“選擇” ajax

Question

我有一個存儲和狀態的多維數組，它使json如下所示：

<?php 
$list[$store][$state] = $city;

echo json_encode ($list);
{"store 1": {"state x": "city 1", "state y": "city 2"}, "store 2": {"state z": "city 3"}}
?>

我需要創建一個選擇，使用所討論數組的數據根據​​選擇的內容更改第二個選擇。 像這樣的東西http://www.daviferreira.com/blog/exemplos/cidades/index.php

如何在javascript中的php中處理此數據？ 我如何將它們分開以在每個選擇中使用它們？

我已經嘗試過：

var list = JSON.parse ("<? php echo json_encode($list)?>");

但這沒有用:(

編輯選擇的結構應如下所示。

{"store 1": {"state x": "city 1", "state y": "city 2"}, "store 2": {"state z": "city 3"}}

First select
Store 1
Store 2

if store 1 selected
Second select
State x
State y

if store 2 selected
Second select
State z

像這樣

Answer 1

這是使用jQuery的方法。 如果您使用的是普通JS，則對讀者來說，將其轉換是一項練習。

var list = <?php echo json_encode($list); ?>;
$.each(list, function(store) {
    $("#store_menu").append($("<option>", {
        value: store,
        text: store
    }));
});

$("#store_menu").change(function() {
    var store = $(this).val();
    $("#state_menu").empty();
    $.each(list[store], function(state) {
        $("#state_menu").append($("<option>", {
            value: state,
            text: state
        }));
    });
});

Answer 2

您可以使用jQuery簡單地做到這一點：

$(document).ready(function(){
    var list = <?= json_encode($list); ?>;
    var storeSelect = $("<select></select>");   
    storeSelect.attr('id', 'storeSelect');
    for(var item in list)
    {
        storeSelect.append('<option value="' + item + '">' + item + '</option>');
    }
    $('#theForm').append(storeSelect);


    var storeStates = $("<select></select>");
    storeStates.attr('id', 'storeState');       
    $('#theForm').append(storeStates);  

    $('#storeSelect').change(function ()
    {
        var storeName = $(this).val();
        for(var item in list[storeName])
        {   
            storeStates.html('<option value="' + item + '">' + item + '</option>');
        }   
    });
    $('#storeSelect').change();
});

它僅使用循環來創建選擇菜單。 並使用onChange事件來操縱值。