Adding another dropdown list to a form with jquery
===

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!