Using php array in javascript to populate a 'select' ajax

Question

I have a multidimensional array of stores and states, which makes a json as follows:

<?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"}}
?>

I need to create a select that changes the second select according to what was chosen, using the data of the array in question. Something like this http://www.daviferreira.com/blog/exemplos/cidades/index.php

How can I handle this data in php for javascript? And how can I separate them to use them in each select?

I've already tried:

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

But it did not work :(

EDIT The structure of the selects should look like this.

{"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

Something like that

Answer 1

Here's how to do it using jQuery. If you're using plain JS, converting it is an exercise for the reader.

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

You can simply do this using 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();
});

It simply uses loops to create the select menu. And uses the onChange event to manipulate the values.