jQuery动态下拉菜单

Question

I have the following code select box div:

Make:<br> 
        <select name="Make">
        <option value = "Toyota">Toyota</option>
        <option value = "Honda">Honda</option>
    </select>


<div id="side_model">           
        Model:<br> 
        <select name="Model">
        <PHP CODE THAT SEARCHES DATABASE FOR ALL MODELS AVAILABLE AND LIST THEM AS OPTIONS ?>
    </select>
</div>

And the following Jquery:

<script>
jQuery(document).ready(function($){
    $('#Make').change(function() {
        $.get('dropdown.php',{make: $(this).val() },function(d){
            $('#side_model').html(d);
        });
    });
});
</script>

This is a very simplified version of my code but what Im doing is, once the make is chosen I query the database in dropwdown php and get all models of that make and then simply populate the list

My dropdown.php looks something like this:

Model:<br> 
            <select name="Model">
            <PHP CODE THAT SEARCHES DATABASE FOR ALL MODELS THAT MATCH THE MAKE SELLECTED AND LIST THEM AS OPTIONS ?>
        </select>

Ok so the code pretty much works the way its intended too except for one detail.

Instead of the jQuery replacing the div with the contentes of dropdown.php it is just adding that extra select box on top of it.

How do I get the jQuery code to replace the model select box with the dynamicaly genereated content?

Answer 1

Maybe clear the div before you refill it?

$('#side_model').empty();

and fill it again with

$('#side_model').append(/*your generated html code*/);

--EDIT--

I also noticed you call $('#make'), but your select only has a name like that, so please add id="make"to your select