使用PHP JQuery和JSON动态下拉

时间:2015-08-07 17:39:21

标签: javascript php jquery html json

我正在尝试使用从JSON文件解析的数据创建动态下拉菜单,并将其存储在PHP中的数组中。我正在尝试使用jquery来获取数据,但我不知道我哪里出错了。

    <?php require './index.php';
?>
<!DOCTYPE html><head><meta charset='UTF-8'> 
    <title>Dropdown</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function() {
        alert('<?php echo$city_list; ?>');
            $("#json-one").change(function() {

            var $dropdown = $(this);

                $.getJSON("demo2.php", function(data) {

                    var key = $dropdown.val();
                    var vals = [];
                    switch(key) {
                        case '<?php echo $city_list;?>':
                            vals = data.split(",");
                            break;}
                    var $jsontwo = $("#json-two");
                    $jsontwo.empty();
                    $.each(vals, function(index, value) {
                        $jsontwo.append("<option>" + value + "</option>");
                    });});});});
    </script></head><body>
    <div id="page-wrap">
            <h1>Pulls from JSON</h1>
        <select id="json-one">
            <option selected value="base">Please Select</option>
            <option value="id1"><?php echo $city_list;?></option>
                </select>
            <br />
            <select id="json-two">
            <option>Please choose from above</option>
        </select>
        </div></body></html>

我得到的数据类似$city_list,目前只包含一个值。

array.php

<?php
require 'index.php';
header('Content-Type: application/json');
echo json_encode($list);

这是[["Hil",[125,139]],["Mer",[52,52]]]的输出。现在我计划的是当我从下拉框中选择一个城市时,应该创建上面的hilmer第二个下拉列表。如果我选择其中任何一个,则应显示相应的值。

对此有任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

为html标记中的附加下拉列表创建Dom元素(即select及其容器),默认隐藏它们然后根据第一个选项添加选择选项(通过jquery),然后取消隐藏元素。