带选择框的ajax脚本

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

try

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

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

getCities.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;