在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中的JavaScript？ 我如何区分他们在每次选择中使用它们？

我已经尝试过：

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：

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