Adding another dropdown list to a form with jQuery

Question

I'm trying to add another dropdown list to a form once an option is selected in the first dropdown.

So below is part of the form. When the dropdown with the name is selected, in this case there are 3 classes, EDMATH 502, EDTECH 401, Math 101, I want different image IDs to appear in the next dropdown ("image_os_image_id"). The idea being that each class has access to different images.

I know this is a job for jquery, but I am having a heck of a time figuring out how to do that. I have searched quite a bit, but am stymied a bit by either poor searching or the fact that I always seem to come up with hits for adding another option to a list, not adding another list.

<div class="control-group">
    <label class="control-label" for="select01">Class</label>
    <div class="controls">
        <select id="select01" name="class_name">
            <option value='EDMATH 502'>EDMATH 502</option>
            <option value='EDTECH 401'>EDTECH 401</option>
            <option value='Math 101'>Math 101</option>
        </select>
    </div>
    <!-- class -->
</div>
<div class="control-group" </div>
    <label class="control-label" for="select01">Image</label>
    <div class="controls">
        <select id="select01" name="image_os_image_id">
            <option value='647abf63-fd95-42a7-a744-e1885f8d5c16'>photoshop</option>
            <option value='0f53de4a-1bb6-43bd-a567-fe181b25cfbe'>matlab</option>
            <option value='647abf63-fd95-42a7-a744-e1885f8d5c16'>photoshop</option>
            <option value='0f53de4a-1bb6-43bd-a567-fe181b25cfbe'>matlab</option>
        </select>
    </div>
    <!-- image -->
</div>
<!-- control group -->

Thanks for any help!

Are you using any server-side code? My usual approach would be to generate the second drop-down on the fly using an Ajax call to the server (which would return the HTML for the drop-down). — Jacob Mattison
– Jacob Mattison, Commented Jul 27, 2012 at 21:24
You cannot have 2 elements with the same ID. IDs should be unique. — gen_Eric
– gen_Eric, Commented Jul 27, 2012 at 21:29
No server side. Will fix ids when I figure out how to add the second dropdown... — curtis
– curtis, Commented Jul 27, 2012 at 21:31

Adrian Bratu · Accepted Answer · 2012-07-27 21:35:56Z

1

Hi first change your second select id from 'select01' to 'select02' - ids should be unique
include jquery

add the script

    $(document).ready(function(){
        $('#select01').bind('change', function(){

            $('#select02 option').remove();

            switch($(this).val()) {
            case 'EDMATH 502':
                $('#select02').append('<option value="647abf63-fd95-42a7-a744-e1885f8d5c16">photoshop</option>');
                $('#select02').append('<option value="0f53de4a-1bb6-43bd-a567-fe181b25cfbe">matlab</option>');
                $('#select02').append('<option value="647abf63-fd95-42a7-a744-e1885f8d5c16">photoshop</option>');
                $('#select02').append('<option value="0f53de4a-1bb6-43bd-a567-fe181b25cfbe">matlab</option>');
                break;
            case 'EDTECH 401':
                $('#select02').append('<option value="test1">test1</option>');
                $('#select02').append('<option value="test2">test11</option>');
                break;
            case 'Math 101':
                $('#select02').append('<option value="test2">test2</option>');
                $('#select02').append('<option value="test22">test22</option>');
                break;
            }



        })
    });

answered Jul 27, 2012 at 21:35

Adrian Bratu

5083 silver badges9 bronze badges

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

2 Comments

Adrian Bratu Over a year ago

i hope this helps you out.. but the idea is.. you have to bind to the change event of the first drop down, When a change is triggered, then remove the content of the second one, and repopulated it based on the selection.. let me know if it works out for you

curtis Over a year ago

Yes, OMG, that is going to work. Thanks so much Adrian! This is going to help to help me save my own skin.

Collectives™ on Stack Overflow

Adding another dropdown list to a form with jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related