Best approach to dynamically populate select list

Question

I've read all morning about some different approaches to use either javascript or jquery to dynamically populate a select list based on choosing an option from a prior select list. I have to admit, I am out of my depth here. I would like to know the best way to do the following:

A student's English language acquisition status (LangFluency) may be either

EO, EL, RFEP, IFEP, TBD

If I choose EO in this select list, I want only English to be selectable in the next drop-down menu, to indicate the student's Primary Language (PrimaryLanguage).

If I choose anything other than EO, I want English to be disabled in the next drop-down menu, because PrimaryLanguage cannot be English if LangFluency is EL, RFEP, IFEP or TBD.

The list of PrimaryLanguage options is extensive, and is at present just a bunch of static entries such as (01) Spanish The LangFluency options are only the five listed above.

Can somebody please help me?

Thanks, Schelly

tau · Accepted Answer · 2014-03-13 22:30:19Z

1

i would use a data structure to show the relationship between the languages, and then have a bit of logic that populates the dropdowns.

here is an example (that i didnt test and has some bad style, but will at least give you the right idea):

<!DOCTYPE html>
<html>
    <head>
        <script>
            //hashtable ("associative" array) based on the fluency. associates fluency with language
            var languages = {
                "EO":["English"],
                "EL":["some other language"],
                "RFEP":["yet another language", "and another!"],
                "IFEP":["more languages", "ugh"],
                "TBD":["lol", "wtf"]
            };
            var main = function() {
                var fluencyElement = document.getElementById("fluency");
                var languageElement = document.getElementById("language");
                var populateLanguage = function(fluency) {
                    //clear what is in our languages dropdown
                    languageElement.innerHTML = "";
                    //get the current value from our fluency dropdown
                    //look up the languages associated with our fluency selection
                    //and iterate through them, populating our language dropdown
                    for (var i = 0; i < languages[fluency].length; i++) {
                        var option = document.createElement("option");
                        option.value = languages[fluency][i];
                        option.innerHTML = languages[fluency][i];
                        languageElement.appendChild(option);
                    }
                };

                //populate the fluency dropdown with the keys from our hashtable
                for (var x in languages) {
                    var option = document.createElement("option");
                    option.value = x;
                    option.innerHTML = x;
                    fluencyElement.appendChild(option);
                }

                //add change event to our now populated fluency dropdown
                fluencyElement.onchange = function() {
                    populateLanguage(this.value);
                };

                //populate with our first selection
                populateLanguage(fluencyElement.value);
            };
            window.onload = main;
        </script>
    </head>
    <body>
        <select id="fluency"></select>
        <select id="language"></select>
    </body>
 </html>

edited Mar 13, 2014 at 22:30

answered Mar 12, 2014 at 20:44

tau

6,83910 gold badges41 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DataBased Over a year ago

HAHAHAHA! Love the TBD hashtable! I'll give this a run tomorrow (walking out the door now) and report back. Thanks so much - I was SO not going the right way with this! I was trying to figure out how to use the disabled attribute... thanks!

tau Over a year ago

hopefully it helps you. that would just be my approach based on what you wrote. i might be mistaken, but the more ideas, the better imo.

DataBased Over a year ago

No, I love this approach! Unfortunately, the second drop-down isn't populating with data. I'm surely doing something wrong in the way I have it structured. Here's what I have for the hashtable: code var languages = { "EO":["English"], "EL":["Spanish","French","Hmong","Farsi"], "RFEP":["Spanish","French","Hmong","Farsi"], "IFEP":["Spanish","French","Hmong","Farsi"], "TBD":["Spanish","French","Hmong","Farsi"] };

tau Over a year ago

it wasnt working because i had some typos. either way, i updated my example a bit so check that out.

DataBased Over a year ago

PERFECT! Thank you so very much - may some rich person one day write songs about you and forward the royalties to you... :-D

Collectives™ on Stack Overflow

Best approach to dynamically populate select list

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related