php - jQuery dropdown dependent

Question

I have 2 dropdown lists. The first one shows the regions from a country, the other one every city in the selected state. The problem is that after I submit my form MySQL Database gets from the first list the ID of the region selected, while the second list doesen't show anything. I want to make my database receive the right information. The name of the region and the name of the city.

How can I do this?

My javascript looks like this:

$(document).ready(function() {
    $(".region").change(function() {`enter code here`
        var id = $(this).val();
        var dataString = 'id=' + id;

        $.ajax({
            type: "POST",
            url: "ajax_city.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $(".city").html(html);
            }
        });
    });
});?

My section.php script is:

<?php

  <label>Country :</label> <select name="country" class="country">
  <option selected="selected">--Select Region--</option>

<?php
 $sql = mysql_query("SELECT id,region FROM regions ORDER BY region");
   while ($row = mysql_fetch_array($sql)) {
    $id     = $row['id'];
    $region = $row['region'];
    echo '<option value="' . $id . '">' . $region . '</option>';
  } 
?>
 </select> <br/><br/>
 <label>City :</label> <select name="city" class="city">
 <option selected="selected">--Select City--</option>

 </select>

?>

The ajax_city.php file looks like this:

<?php

if($_POST['id']) {
  $id = $_POST['id'];
  $sql=mysql_query("SELECT DISTINCT city FROM CITY where id_city=$id order by city");

    while($row = mysql_fetch_array($sql)) {
      $id=$row['id'];
      $data=$row['city'];
      echo "<option value=$id>$data</option>";
    }
 }

?>

The code works fine. But I can't figure out what to do with the database. I think I have to change something in the JavaScript?

Any help please?

Answer 1

<script type="text/javascript">
$(document).ready(function()
{
    $(".country").change(function()
    {
        var id=$(this).val(); 
        var region = $(this).find('option:selected').html();  
        $.ajax({
          type: "POST",
          url: "ajax_city.php",
          data: { country: id , name : region },
          cache: false,
          success: function(html)
           {
             $(".city").html(html);
             $(".city").removeAttr('disabled');
           } 
    });
    });
});
</script>

section.php

<label>Country :</label> 
<select name="country" class="country">
    <option selected="selected">--Select Region--</option>
        <?php
            $sql=mysql_query("SELECT id,region FROM regions ORDER BY region");
            while($row = mysql_fetch_array($sql))
            {
                $id=$row['id'];
                $region=$row['region'];
                echo '<option value="'.$id.'">'.$region.'</option>';
            } 
            ?>
</select><br/><br/>
<label>City :</label> 
<select disabled name="city" class="city">
    <option selected="selected">--Select City--</option>
</select>

ajax_city.php

<?php
    if($_POST['country'])
    {
        $id = $_POST['country'];
        $region = $_POST['name'];
        $sql = mysql_query("SELECT DISTINCT city FROM CITY where id_city = $id order by city");

        while($row = mysql_fetch_array($sql))
        {
            $id=$row['id'];
            $data=$row['city'];
            echo "<option value=$id>$data</option>";
        }
    }
?>