如何让json将数据编码到php的下拉字段中？

Question

<script>
    $(document).ready(function(){
        $("#region").change(function(){
            region = $(this).val()
            $.ajax({
                type:"POST",
                data:{"region":region},
                url:"get-city.php",
                success:function(data){
                    alert(data);
                    //$("#city").html(data);
                    //$("#state").html(data);
                }
            });
        });
    });
</script>

<select name="region"  id="region" >
    <option value="">Select Region</option>
    <?php 
        $sql = mysqli_query($con, "SELECT * FROM `region`");
        while($row = mysqli_fetch_array($sql)) 
        {
    ?>
            <option value="<?php echo $row['heading_text']; ?>"><?php echo $row['heading_text']; ?></option>
    <?php 
        } 
    ?>
</select>
<select name="state" id="state">
    <option value="">Select Region State</option>
</select>
<select name="city" id="city">
    <option value="">Select Region City</option>
</select>

get-city.php

<?php 
    error_reporting(0);
    include('dbase.php');
    $region = $_POST['region'];
    $sql = "select * from region_data where heading_text='".$region."'";
    $results = mysqli_query($con,$sql);
    while($rows = mysqli_fetch_assoc($results))
    {
        $data[] = array(
                            'state' => $rows['state'],
                            'city' => $rows['name']
                        );
    }
    echo json_encode($data);
?>

In this code I have created simple dropdown one is for region where I change its value by id as you can see in jquery code. Now, As you can see in get-city.php file I have encode data via json_encode function which work fine. But problem is I am not able to show data in state and city drop down in php. My json_encode data look like:

[{"state":"","city":"delhi"},{"state":"","city":"agra"},{"state":"","city":"varanasi"},{"state":"","city":"haridwar"},{"state":"","city":"dharamshala"},{"state":"","city":"srinagar"},{"state":"","city":"mussoorie"},{"state":"","city":"amritsar"},{"state":"","city":"shimla"},{"state":"","city":"kullu manali"},{"state":"","city":"assam"},{"state":"","city":"meghalaya"},{"state":"","city":"arunachal pradesh"},{"state":"","city":"manipur"},{"state":"","city":"nagaland"},{"state":"","city":"J AND K"},{"state":"38","city":"Saharanpur"}]

So, How can I get value in dropdown? Please help me.

Thank You

Answer 1

If you need to get back a JavaScript object from a JSON string, you are looking for JSON.parse(). I did not got exactly how you want to display data, but as far as I understand you are looking for a way to populate the dropdowns, so I will show you only for the city part...for all the other dropdowns the flow is the same.

Assuming you have all the cities in the cities variable after the AJAX call (and after the JSON.parse call if needed):

let cities = [{"state":"","city":"delhi"},{"state":"","city":"agra"},{"state":"","city":"varanasi"},{"state":"","city":"haridwar"},{"state":"","city":"dharamshala"},{"state":"","city":"srinagar"},{"state":"","city":"mussoorie"},{"state":"","city":"amritsar"},{"state":"","city":"shimla"},{"state":"","city":"kullu manali"},{"state":"","city":"assam"},{"state":"","city":"meghalaya"},{"state":"","city":"arunachal pradesh"},{"state":"","city":"manipur"},{"state":"","city":"nagaland"},{"state":"","city":"J AND K"},{"state":"38","city":"Saharanpur"}];

cities.map(function(item, index) {
  // let's build an <option> element
  const city = jQuery("<option>", {value: item.city, text: item.city})
  // let's add the <option> element to the right <select>
  jQuery("#city").append(city);
});