选择框更改与ajax

Question

I tried to build select box that change, with ajax, the values of the second select box.

First I choose AREA and than the CITIES in this area.

Can you please tell me what do I do wrong?

Client side:

<script>
$(function () {

  $("#first").change(function () {
    $("#second").load('recs.php?area_id=' + $(this).val());
  });

});
</script>


<form method="post" action="tosomewhere.php">

    <select id="first" name="area_id">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>

    <select id="second" name="section">  </select>

</form>

Server side:

<?PHP

    include "db.php"

    $areaID = $_GET['area_id'];
    $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'];

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

    echo $second_option;

?>

Answer 1

Try this,

$(function () {

  $("#first").change(function () {
    $.get('recs.php', {area_id: $(this).val()}, function(data) {
      $("#second").html(data);
    });
  });

});

NOTE: It's better to put an exit after echo .

echo $second_option;
exit;