2 dropboxes ajax

Good afternoon people,

This week I started for the first time working with an ajax-request but I don't have any idea how to use it the right way. My situation: I've got 2 dropboxes, the first one contains data开发者_运维技巧 from the database, the second one has to get filled with the option i've selected in the first combobox (ex. select * from presents where city = '$_GET['city']').

I've got the following code:

from index.php header-section

    $('#woonplaats').change(function(){
        var woonplaats = $('#woonplaats').val();

        $.ajax({ 
        type: "GET", 
        url: "ajax.php?woonplaats="+woonplaats+"", 
        success: function(msg){
            $('#pandtype').html(msg);}
        });
    });

from ajax.php

$_GET['woonplaats'] = mysql_real_escape_string($_GET['woonplaats']);

if(isset($_GET['woonplaats']))
{ 
    $query = "SELECT * FROM aanbod WHERE Plaats = '".$_GET['woonplaats']."'";
    $result = mysql_query($query);
    echo $query;

    echo "<select id='pandtype' name='pandtype'>";
    while($row = mysql_fetch_object($result))
    { 
        echo '<option value="'.ucfirst(strtolower($row->PandType)).'">'.ucfirst(strtolower($row->PandType)).'</option>';
    }
    echo "</select>";
}

What do I miss? And what do I have to do with the original 2nd loaded combobox?

Kind Regards!

---

In response to the self answered response, I have a small refactoring to offer--

Instead of creating a placeholder element and using the .html() jQuery method:

$('#blaat').html(msg);

You could dynamically create the element you want your ajax response to show in...

To show after the element the created the ajax request (let's say it was #woonplaats):

$('<div>' + msg + '</div>').appendTo($('#woonplaats'));

I prefer this method because depending on inherited css rules, you can end up with a bit of "wonk" in the display. It's a bit more content in the script setup, but may prevent the need for adding another css class or inline styling for "display:none" on the element.

---

Using jquery

***in head tag

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
            $('#states').change(function(){
                $('#cities').load('places.php?state='+$('#states').val() );
        $('#cities').focus();
            });
        });
</script>

**Combo states

<select name="states" id="states" onChange="" width="200px" style="width: 200px">
        <option value="">Select state</option>
        <?php
        $query_uf =  "SELECT * FROM states ORDER BY state ASC";
        $result = mysql_query($query_uf, $bd);
        while ($uf = mysql_fetch_assoc($result)) {
            echo "<option value='".$uf['cod']."'>".$uf['name_state']."</option>";
        }
?>
</select>

**combo cities (it's filled when states change)

<select name="cities" id="cities" width="200px" style="width: 200px">
        <option value="">Choose a city</option>
      </select>

places.php

$id_state = $_GET['state'];
$result = mysql_query("SELECT * FROM cities WHERE cod_st = '".$id_state."' ORDER BY name_city ASC", $bd) or die(mysql_error());
echo "<option value=\"\">Select city.</option>";
while($row = mysql_fetch_array($result) ){
    echo "<option value='".$row['cod_city']."'>".$row['name_city']."</option>";
}

Table states cod | name_State

---

1 | Florida 2 | California

Table cities cod_city | name_city | cod_st

---

1 | Miami | 1 2 | Orlando | 1 3 | San Diego | 2 4 | San Francisco | 2