www.webdeveloper.com
Results 1 to 8 of 8

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

  1. #1
    Join Date
    Apr 2008
    Posts
    6

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

    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!

  2. #2
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74
    This is exactly what I am working on in this thread... http://www.webdeveloper.com/forum/sh...d.php?t=178639

  3. #3
    Join Date
    Apr 2008
    Posts
    6
    Thanks for pointing me over there! I'll check it out and see what I can implement based on the code there.

  4. #4
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74
    If you need to see more code or have any questions let me know in this thread.

  5. #5
    Join Date
    Apr 2008
    Posts
    6
    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.

  6. #6
    Join Date
    Oct 2005
    Location
    Philadelphia, USA
    Posts
    74
    Here is code for the provinces array
    PHP Code:
    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;

    states array
    PHP Code:
    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;

    this is the function that is called when someone changes the country drop down menu...
    PHP Code:
    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';
        }


    this function changes the options in a drop down menu...
    PHP Code:
    function changeSelectionOptions(formNameselectNameselectTitleoptionArraychooseDefault) {
        var 
    0;
        var 
    1;

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

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

    finally, some of the html...
    HTML Code:
                 <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>

  7. #7
    Join Date
    Apr 2008
    Posts
    6
    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!

  8. #8
    Join Date
    Sep 2012
    Posts
    1

    Works great, but...

    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(), '');

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles