Html selected issue with ajax/jquery - php

Question

I've a html form where the countries in the drop down are coming from a database. If user selects any country, then the city drop diwn will appear based on selected country.
If user wrongly input any field of the form (there are other field in this form) then country drop down will will remember which country the user initially selected, but clears the city, resetting it to --Select City--. I'm trying to selected the city name but I can't. Any idea ?
Ajax Code here:
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
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);
}
});
});
});
</script>
ajax_city.php here
<?php
require_once("toplevel/content/database/databd.php");
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("select Name from cities WHERE CountryCode ='$id'");
while($row=mysql_fetch_array($sql))
{
$id=$row['Code'];
$data=$row['Name'];
if($_POST['city'] == $data)
{
$sel = 'selected = "selected"';
}
else
{
$sel = " ";
}
echo '<option value="'.$data.'" ' .$sel . ' >'.$data.'</option>';
}
}
?>
Html form here:
<tr>
<td>PAYS <span style="color: #FF0000;">*</span></td>
<td>
<select name="country" class="country">
<option value="">Select</option>
<?php
$sql=mysql_query("select * from country");
while($row=mysql_fetch_array($sql))
{
$id=$row['Code'];
$data=$row['Name'];
$data = mb_convert_encoding($data, 'UTF-8');
if($id == $_POST['country'])
{
$sel = 'selected="selected"';
}
else
{
$sel = "";
}
echo '<option value="'.$id.'"' . $sel . '>'.$data.'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select class="city" name="city">
<option selected="selected" value="">--Select City--</option>
</select>
</td>
</tr>

Answer 1

Not quite sure but issue is in datastring try changing this:
$(".country").change(function(){
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);
}
});
});

Answer 2

You will need to rebuild your HTML on reload, but now with your City list (this is untested, but based on your code from the Country dropdown):
<tr>
<td>City</td>
<td>
<select class="city" name="city">
<option selected="selected" value="">--Select City--</option>
<?php
if (isset($_POST['city']) {
$sql=mysql_query("select * from city");
while($row=mysql_fetch_array($sql))
{
$id=$row['Code'];
$data=$row['Name'];
$data = mb_convert_encoding($data, 'UTF-8');
if($id == $_POST['city']) { $sel = 'selected="selected"'; }
else { $sel = ""; }
echo '<option value="'.$id.'"' . $sel . '>'.$data.'</option>';
}
}
?>
</select>
</td>
</tr>
WARNING: This is just same sample code. This should never ever go into production, because it has the potential for being extremely unsafe! As #PolishPrince has pointed out above, you should at least use PDO or MySQLi.