/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Apr 29.2008

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!

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@BoarsHellApr 29.2008 — This is exactly what I am working on in this thread... http://www.webdeveloper.com/forum/showthread.php?t=178639
Copy linkTweet thisAlerts:
@ginabauthorApr 29.2008 — [B]Thanks [/B]for pointing me over there! I'll check it out and see what I can implement based on the code there.
Copy linkTweet thisAlerts:
@BoarsHellApr 29.2008 — If you need to see more code or have any questions let me know in this thread.
Copy linkTweet thisAlerts:
@ginabauthorApr 30.2008 — Thank you, it would be very helpful to see more code - particularly the section where you declare the array for the states and provinces.

I'm going to start by recreating your code for Country>State/Province, etc so I can understand the concept of how this works -- and then adapt it to the customization I need.
Copy linkTweet thisAlerts:
@BoarsHellMay 01.2008 — Here is code for the provinces array
[code=php]
function provincesArray() {
var provinces = ['Alberta', 'AB', 'British Columbia', 'BC', 'Manitoba', 'MB', 'New Brunswick', 'NB', 'Newfoundland and Labrador', 'NL', 'Northwest Territories', 'NT', 'Nova Scotia', 'NS', 'Nunavut', 'NU', 'Ontario', 'ON', 'Prince Edward Island', 'PE', 'Quebec', 'QC', 'Saskatchewan', 'SK', 'Yukon', 'YT'];

return provinces;
}
[/code]

states array
[code=php]
function statesArray() {
var states = ['Alabama', 'AL', 'Alaska', 'AK', 'Arizona', 'AZ', 'Arkansas', 'AR', 'California', 'CA', 'Colorado', 'CO', 'Connecticut', 'CT', 'Delaware', 'DE', 'District of Columbia', 'DC', 'Florida', 'FL', 'Georgia', 'GA', 'Hawaii', 'HI', 'Idaho', 'ID', 'Illinois', 'IL', 'Indiana', 'IN', 'Iowa', 'IA', 'Kansas', 'KS', 'Kentucky', 'KY', 'Louisiana', 'LA', 'Maine', 'ME', 'Maryland', 'MD', 'Massachusetts', 'MA', 'Michigan', 'MI', 'Minnesota', 'MN', 'Mississippi', 'MS', 'Missouri', 'MO', 'Montana', 'MT', 'Nebraska', 'NE', 'Nevada', 'NV', 'New Hampshire', 'NH', 'New Jersey', 'NJ', 'New Mexico', 'NM', 'New York', 'NY', 'North Carolina', 'NC', 'North Dakota', 'ND', 'Ohio', 'OH', 'Oklahoma', 'OK', 'Oregon', 'OR', 'Pennsylvania', 'PA', 'Rhode Island', 'RI', 'South Carolina', 'SC', 'South Dakota', 'SD', 'Tennessee', 'TN', 'Texas', 'TX', 'Utah', 'UT', 'Vermont', 'VT', 'Virginia', 'VA', 'Washington', 'WA', 'West Virginia', 'WV', 'Wisconsin', 'WI', 'Wyoming', 'WY'];

return states;
}
[/code]

this is the function that is called when someone changes the country drop down menu...
[code=php]
function onCountryChange(country) {
if (country === 'US') {
changeSelectionOptions('addressForm', 'Address:State', 'State', statesArray(), '');
document.getElementById("Address:Zip_title").innerHTML = 'Zip Code';
} else if (country === 'CA') {
changeSelectionOptions('addressForm', 'Address:State', 'Province', provincesArray(), '');
document.getElementById("Address:Zip_title").innerHTML = 'Postal Code';
}
}
[/code]


this function changes the options in a drop down menu...
[code=php]
function changeSelectionOptions(formName, selectName, selectTitle, optionArray, chooseDefault) {
var i = 0;
var k = 1;

//make sure there aren't any options left over from a previous time
document[formName][selectName].options.length = 0;

while (i < optionArray.length - 1) {
//option name, option value
if (chooseDefault === optionArray[i + 1]) {
document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i + 1], true, true);
} else {
document[formName][selectName].options[k] = new Option(optionArray[i], optionArray[i + 1]);
}
i = i + 2;
k = k + 1;
}
document.getElementById(selectName + "_title").innerHTML = selectTitle;
}
[/code]

finally, some of the html...
[code=html]
 <tr>
<td align="right"><label for="Address:Cntry">Country</label></td>
<td align="left"><select name="Address:Cntry" onchange="onCountryChange(addressForm['Address:Cntry'].value);"><option value="">&lt;Select One&gt;</option><option value="CA">Canada</option><option value="US">United States</option></select></td>
</tr>
<tr>
<td align="right"><label for="Address:State"><span id="Address:State_title">State</span></label></td>
<td align="left"><select name="Address:State"><option value="">&lt;Select Country First&gt;</option></select></td>
</tr>
<tr>
<td align="right"><label for="Address:Zip"><span id="Address:Zip_title">Zip Code</span></label></td>
<td align="left"><input type="text" size="16" name="Address:Zip" value="&mvte:global:Address:Zip;" /></td>
</tr>
[/code]
Copy linkTweet thisAlerts:
@ginabauthorMay 06.2008 — So I ended up going quite a different route and implemented a (perhaps sloppy) workaround.

I placed each set of follow-up questions in their own uniquely named div container and then hid each unique div by setting the display to "none". When the user makes a selection from the "Position Applied for" dropdown, the javascript unhides 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!
Copy linkTweet thisAlerts:
@bouscalSep 05.2012 — Code works great in my implementation but I have two pick lists that I want to update and only the first one referenced is updated. Any suggestions for making it update both?

[CODE] changeSelectionOptions('Form1','fld07','State', statesArray(), '');
changeSelectionOptions('Form1','fld18','State', statesArray(), '');[/CODE]
×

Success!

Help @ginab spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...