CODEWITHSUNDEEP
javascriptjquery
DataBased
DataBased

Reputation: 33

Best approach to dynamically populate select list

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

Upvotes: 0

Views: 100

Answers (1)

tau
tau

Reputation: 6749

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>

Upvotes: 1

Related Questions