在 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

如何在 php for javascript 中处理这些数据？ 以及如何将它们分开以在每个选择中使用它们？

我已经试过了：

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

但它没有工作:(

EDIT选择的结构应该如下所示。

{"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 简单地做到这一点：

$(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 事件来操作这些值。

Answer 2

以下是使用 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
        }));
    });
});