jQuery dropdown dependent - php

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>";
}
}
?>

Answer 2

Database: country
CREATE TABLE IF NOT EXISTS `city` ( `id_city` int(11) NOT NULL AUTO_INCREMENT, `city` varchar(30) NOT NULL, `pid` int(11) NOT NULL, PRIMARY KEY (`id_city`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
INSERT INTO `city` (`id_city`, `city`, `pid`) VALUES(1, 'Gujarat', 1),(2, Maharashtra', 1),(3, 'Rajasthan', 1),(4, 'Madhya Pradesh', 1),(5, 'Lahore', 2),(6, 'hyderabad', 2);
CREATE TABLE IF NOT EXISTS `regions` ( `id` int(11) NOT NULL AUTO_INCREMENT, `region` varchar(30) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
INSERT INTO `regions` (`id`, `region`) VALUES(1, 'India'),(2, 'Pakistan');
Javascript On default.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<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>
<label>Country :</label>
<select name="country" class="country">
<option selected="selected">--Select Region--</option>
<?php
$conn=mysql_connect("localhost","root","");
$db=mysql_select_db("country",$conn);
$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'])
{
$conn=mysql_connect("localhost","root","");
$db=mysql_select_db("country",$conn);
$id = $_POST['country'];
$region = $_POST['name'];
$sql = mysql_query("SELECT DISTINCT city FROM CITY where pid = $id order by city");
while($row = mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['city'];
echo "<option value=$id>$data</option>";
}
}
?>