utilisant php array en javascript pour remplir un « select » ajax

Question

J'ai un tableau multidimensionnel des magasins et des Etats, ce qui en fait un JSON comme suit:

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

Je dois créer une sélection qui change la deuxième sélection selon ce qui a été choisi, en utilisant les données du tableau en question. Quelque chose comme ça http://www.daviferreira.com/blog/exemplos/cidades/index.php

Comment puis-je gérer ces données en php pour javascript? Et comment puis-je les séparer pour les utiliser dans chaque sélection?

Je l'ai déjà essayé:

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

Mais cela n'a pas fonctionné :(

EDIT La structure des Selects devrait ressembler à ceci

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

Quelque chose comme.

Answer 1

Vous pouvez simplement faire ceci en utilisant 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(); 
}); 

Il utilise simplement des boucles pour créer le menu de sélection. Et utilise l'événement onChange pour manipuler les valeurs.

Answer 2

Voici comment le faire en utilisant jQuery. Si vous utilisez JS simple, la conversion est un exercice pour le lecteur.

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 
     })); 
    }); 
});