Jquery dynamic dropdown menus

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?

Instead of randomly placed text, consider using proper labels. — Joseph Silber
– Joseph Silber, Commented Sep 4, 2012 at 17:13
have you tried replacewith()? just use the ID of the select and replace it with whatever the $.get returns — Matt
– Matt, Commented Sep 4, 2012 at 17:20
I have not tried replacewith(). How would I use it int his situation? — Marc
– Marc, Commented Sep 4, 2012 at 17:21

Matt · Accepted Answer · 2012-09-04 18:36:20Z

2

It may make more sense to use jQuery's .replaceWith() function (documentation here):

First, add an ID to your select element

<div id="side_model">           
    Model:<br> 
    <select id="Model" name="Model">
        <option value='0'>----</option>
    </select>
</div>

Then replace it with the return value from the $.get():

jQuery(document).ready(function($){

$('#Make').change(function() {
        $.get('dropdown.php',{make: $(this).val() },function(d){
            $('#Model').replaceWith(d);
        });
    });
});

Now all you need to do in the background is to generate the select in its entirety (including the open/close <select> tags).

UPDATE

I just noticed you're calling $("#Make").change() but you never give any of your elements an ID set to "Make". Add the ID attribute to your select where name="Make":

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

edited Sep 4, 2012 at 18:36

answered Sep 4, 2012 at 17:24

Matt

7,0504 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marc Over a year ago

These steps all helped. Except I had to go back to html instead of replace with because replacewith only worked for the first instance of onchange. The main problem was was that I had a <tr> and a <td> in my div and once i put that outside the div everything worked well. The ID was also an issue. Thanks for the help!

HansElsen · Accepted Answer · 2012-09-04 17:41:02Z

1

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

answered Sep 4, 2012 at 17:41

HansElsen

1,7535 gold badges27 silver badges49 bronze badges

1 Comment

Matt Over a year ago

Good catch! You might want to expand this into an answer, otherwise it may get down-voted. (In its current form, it's considered a comment).

HansElsen · Accepted Answer · 2012-09-04 18:45:08Z

0

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

edited Sep 4, 2012 at 18:45

answered Sep 4, 2012 at 17:23

HansElsen

1,7535 gold badges27 silver badges49 bronze badges

2 Comments

Matt Over a year ago

.html() should work exactly the same as this. This solution just adds extra lines of code.

HansElsen Over a year ago

oops didn't see the html() function. Shame on me.

Collectives™ on Stack Overflow

Jquery dynamic dropdown menus

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related