在javascript中使用php数组来填充'select'ajax

时间:2017-10-18 19:54:16

标签: javascript php arrays json ajax

我有一个存储和状态的多维数组,它使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中为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

像这样的东西

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您可以使用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事件来操纵值。