How do I create a dependant drop down in a web form?

Question

I am trying to add a web form to a web page that includes a dependant drop down menu. For example, I'd like there to be a drop down menu called "Interested Class" with three fields: "Tribe Fit", "Tribe Life" and "Tribe Core". When a user selects one of these fields ("Tribe Fit" for example), I want a new drop down menu to appear with the following choices: "7:00am", "12:30pm", "7:00pm".
I have attempted this here and as you can see it's not working at the moment. The time drop down fields should be hidden until an "Interested Class" has been selected.
http://www.cityfitness.com.au/nicole-form-test?Preview=True
I've placed my JS code in the HTML view of the actual web page as I noticed when I place it in the actual custom form it doesn't carry through to the page. I don't know if I'm placing my JS in the correct place though.
Here is a snippet of my code if it helps:
<tr>
                        <td><label for="CAT_Custom_328771">Interested Class</label><br />
                        <select name="CAT_Custom_328771" id="CAT_Custom_328771" class="cat_dropdown">
                        <option value=" ">-- Please select --</option>
                        <option value="Tribe Fit">Tribe Fit</option>
                        <option value="Tribe Life">Tribe Life</option>
                        <option value="Tribe Core">Tribe Core</option>
                        </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <div id="fit" class="times">
                        <select>
                        <option value="7:00am">7:00am</option>
                        <option value="12:30pm">12:30pm</option>
                        <option value="7:00pm">7:00pm</option>
                        </select>
                        </div>
                        <div id="life" class="times">
                        <select>
                        <option value="7:00am">7:00am</option>
                        <option value="8:00am">8:00am</option>
                        <option value="11:30am">11:30am</option>
                        </select></div>
                        <div id="core" class="times">
                        <select>
                        <option value="8:00am">8:00am</option>
                        <option value="11:30am">11:30am</option>
                        <option value="12:30pm">12:30pm</option>
                        </select>
                        </div>
                        </td>
                    </tr>
                    <tr>
                        <td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>
                    </tr>
                </tbody>
            </table>
            <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
            <script type="text/javascript">
$(function () {
    $('#CAT_Custom_328771').change(function () {
        $('.times').hide();
        $('#' + $(this).val()).show();
//<![CDATA[
var submitcount67919 = 0;function checkWholeForm67919(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number"); if (theForm.HomeAddress) why += isEmpty(theForm.HomeAddress.value, "Home Address"); if (theForm.HomeCity) why += isEmpty(theForm.HomeCity.value, "Home City"); if (theForm.HomeState) why += isEmpty(theForm.HomeState.value, "Home State"); if (theForm.HomeZip) why += isEmpty(theForm.HomeZip.value, "Home Zipcode"); if (theForm.HomeCountry) why += checkDropdown(theForm.HomeCountry.value, "Home Country"); if(why != ""){alert(why);return false;}if(submitcount67919 == 0){submitcount67919++;theForm.submit();return false;}else{alert("Form submission is in progress.");return false;}}
//]]>
</script>
        </form>
Can anyone please help explain to me how I can make this work? I am only a JS beginner - so please try to explain in simple terms if possible.
Thank you!
Nicole

Answer 1

This wont work, Needs to be a lot more then this and CSS to hide things rather then script hiding them.
Nicole, The times that are availible I gather differ depending on the type of the dropdown?
You do not need multiple time dropdowns.
Steps you need to do first on the form:
1. Ensure the custom form field dropdown for interested class exists.
2. Have custom dropdown with all the times that any of them can be. This is CSS hidden by default.
3. Also CSS hide all the options in the select as well in your CSS.
Next can you show what classes have what times as an example then can put the code more relevent to your example you can work off.
The code will follow along the lines of....
Dropdown On Change
          If selected options is xxx class then
          fade in option times  dropdown 
          Show these otpion times
        if selected option is zzz class then
          fade in option times dropdown
               show these times
More control as you need to work properly, only two dropdowns needed.