php - ajax script with selectbox

Question

I have script that show all the cities (in selectbox) regarding the areaID I chose before.

for instance - it i chose areaID 2 I will see in the second selectbox all the cities that conect to area 2

The problem is - when I load the page and want to show the city that was selected before (from the DB)

the CITY option, in the city selectbox, is not point on the cityID from the DB.

What do I need to change?

Thanks in advanced.

<select name='areaID' id='areaID'>
    <?PHP
    $query = mysql_query("SELECT * FROM `areas` ORDER BY id ASC "); 
    while($index = mysql_fetch_array($query)) 
    {
        $db_area_id = $index['id'];
        $db_area_name = $index['name'];
        if ($db_area_id == $userDetails['area'])
            echo "<option value='$db_area_id' selected>$db_area_name</option>";         
        else    
            echo "<option value='$db_area_id'>$db_area_name</option>";
    }
    ?>
</select>

<select id='cityID' name='cityID'>  </select>


<script>

<?PHP if ($_POST) { ?>
    $(document).ready(function(){
        $('#areaID').filter(function(){
            var areaID=$('#areaID').val();
            var cityID=<?PHP echo $userDetails['cityID'] ?>;
            $('#cityID').load('ajax/getCities.php?areaID=' + areaID+'&cityID=' + cityID);
            return false;
        });
    }); 
<?PHP }else { ?>

$(function () {
    function updateCitySelectBox() {
        var areaID = $('#areaID').val();
        $('#cityID').load('ajax/getCities.php?areaID=' + areaID);

        return false;
    }

    updateCitySelectBox();
    $('#areaID').change(updateCitySelectBox);
});
<?PHP } ?>

</script>

getCities.php:

$areaID = (int) $_GET['areaID'];

$second_option = "";

$query2 = mysql_query("SELECT * FROM `cities` WHERE area_id = $areaID ORDER BY id ASC");
while($index = mysql_fetch_array($query2)) 
{
    $id = $index['id'];
    $name  = $index['name'];

    $name = iconv('windows-1255', 'UTF-8', $name);

    $second_option .= "<option value='$id'>$name</option>";

}

echo $second_option;

Answer 1

尝试

jQuery：

    $(document).ready(function(){

        $('#areaID').on('change',function(){
          var SelectedAreaID = $(this).val();
          $.ajax({
              type: "POST",
              url: "ajax/getCities.php",
              data: { areaID: SelectedAreaID }
                }).done(function(data) {
                     $('#cityID').html(data);
                });
          return false;
        });

    });

选择框：

<select name='areaID' id='areaID'>
    <?PHP
    $query = mysql_query("SELECT * FROM `areas` ORDER BY id ASC "); 
    while($index = mysql_fetch_array($query)) 
    {
        $db_area_id = $index['id'];
        $db_area_name = $index['name'];
        if ($db_area_id == $userDetails['area']){
            echo "<option value='$db_area_id' selected>$db_area_name</option>";         
        }
         else{
            echo "<option value='$db_area_id'>$db_area_name</option>";
        }           
    }
    ?>
</select>

<select id='cityID' name='cityID'>  </select>

获取城市.php

$areaID = $_POST['areaID'];

$second_option = "";

$query2 = mysql_query("SELECT * FROM `cities` WHERE area_id = $areaID ORDER BY id ASC");
while($index = mysql_fetch_array($query2)) 
{
    $id = $index['id'];
    $name  = $index['name'];

    $name = iconv('windows-1255', 'UTF-8', $name);

    $second_option .= "<option value='$id'>$name</option>";

}

echo $second_option;