Dependent values/picklists with Javascript?

Change values in dependent picklist based on selection in first picklist?

[ginab]

I'm designing a job application and need help with a section of javascript.

My job application contains an "Position Applied For" html form pull-down menu containing the option values of all currently available Job Titles.
As an example --
<select name="Position Applied For">
<option value="" selected>Please Choose...</option>
<option value="Entry Level Sales">Entry Level Sales</option>
<option value="Admin Asst">Admin Asst</option>
</select>

Below this "Position Applied For" picklist, I have a section containing five multiple-choice job-related questions for the user to answer. I've designed it so the possible answers for each of these questions are also in html pull-down menus.

However, our recruiting department needs the application to be able to display a different set of options/answers for each Job Title listed in the "Position Applied For" Picklist. Instead of creating a different html job application for every single different job title -- and we have many! -- I'd like to be able to use Javascript to create dependent picklists and therefore only roll out ONE html job application.

For example, on this ideal page, if the user were to select "Admin Asst" from the "Position Applied For" picklist, then the option values for questions 1, 2, 3, 4 and 5 ALL would change to be specific to the Admin Asst position.

For instance for Question 1,
<select name="Question1">
<option value="" selected>Please Choose...</option>
<option value="A">Text of Admin Asst Answer A</option>
<option value="B">Text of Admin Asst Answer B</option>
<option value="C">Text of Admin Asst Answer C</option>
<option value="D">Text of Admin Asst Answer D</option>
<option value="E">Text of Admin Asst Answer E</option></select>

But if the user was to select "Entry Level Sales" from the
from the "Position Applied For" picklist, then the option values for questions 1, 2, 3, 4 and 5 ALL would change to be specific to the Entry Level Sales position.

For instance for Question 1 --
<select name="Question1">
<option value="" selected>Please Choose...</option>
<option value="A">Text of Entry Level Sale Answer A</option>
<option value="B">Text of Entry Level Sales Answer B</option>
<option value="C">Text of Entry Level Sales Answer C</option>
<option value="D">Text of Entry Level Sales Answer D</option>
<option value="E">Text of Entry Level Sale Answer E</option></select>

Anyone have any insight on this? If you need me to clarify or further explain anything, just let me know. THANKS!

[JAB Creations]

You can reference select value via the selectedIndex property. Here is an example...

- John

if (document.getElementById('my_select_id').selectedIndex == 0) {alert('Select menu\'s first item selected.');}
else if (document.getElementById('my_select_id').selectedIndex == 1) {alert('Select menu\'s second item selected.');}

[ginab]

So my workaround was to put each set of follow-up questions in their own div container and then hide each div by setting the display to "none". When the user makes a selection from the "Position Applied for" dropdown, the javascript would then unhide the div that contains the appropriate set of questions.

This works just fine, but now when I go to submit the form, the form validation script is checking to see if the questions in the hidden sections are answered also!

I need to fix this so that the form validation only requires the shown fields to be answered, not the hidden ones.

I can post my code here if that would help in troubleshooting this! Thanks all!