Html выбранная проблема с ajax/jquery

Question

У меня есть html-форма, в которой страны в раскрывающемся списке поступают из базы данных. Если пользователь выберет какую-либо страну, то в нижней части будет отображено падение города в зависимости от выбранной страны.

Если пользователь ошибочно вводит любое поле формы (в этой форме есть другое поле), то страна будет помнить, какую страну изначально выбрал пользователь, но очищает город, сбрасывая его до --Select City--. Я пытаюсь выбрать название города, но я не могу. Есть идеи ?

Ajax код здесь:

<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 здесь

<?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 форма здесь:

<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

Не дш т.е уверен, но проблема заключается в datastring попробовать это изменить:

$(".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

Вам нужно будет восстановить ваш HTML на перезагрузку, но теперь со списком City (это проверялось, но на основе кода из выпадающего списка Страна):

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

ВНИМАНИЕ: Это тот же пример кода. Это никогда не должно входить в производство, потому что оно может быть крайне опасным! Как отметил @PolishPrince, вы должны хотя бы использовать PDO или MySQLi.