Dynamic drop down using PHP JQuery and JSON

Question

I am trying to create a dynamic drop down menu using the data I parsed from a JSON file and stored in an array in PHP. I am trying to use jquery to get the data but I do not know where I am going wrong.

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

I got data like $city_list which contains only one value at present.

array.php

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

Output of this is [["Hil",[125,139]],["Mer",[52,52]]]. Now what I was planning was when I select a city from the dropdown box the above hil and mer second dropdown should be created. And if I select any of this their corresponding values should be displayed.

Any help on this would be appreciated.

possible duplicate of [how to parse json data with jquery / javascript?](http://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript) — Jay Blanchard, Aug 07 '15 at 17:43
I am able to parse the JSON data but not aable to create the dynamic menu — Phani Shashank, Aug 07 '15 at 17:46

score 0 · Answer 1 · answered Aug 07 '15 at 17:58

0

Create the Dom elements for the additional dropdown in your html markup (i.e the select and its containers), hide them by default then add select options (via jquery) based on the first choice, then unhide the elements.

answered Aug 07 '15 at 17:58

TrickyDupes

276
2
9

Dynamic drop down using PHP JQuery and JSON

1 Answers1