Question

我整个上午都在阅读一些不同的方法来使用javascript或jquery来动态填充选择列表，这是基于从先前的选择列表中选择一个选项。我不得不承认，我不在这里。我想知道执行以下操作的最佳方法：

学生的英语语言习得状态（LangFluency）可能是

EO，EL，RFEP，IFEP，TBD

如果我在此选择列表中选择EO，我只想在下一个下拉菜单中选择英语，以指示学生的主要语言（PrimaryLanguage）。

如果我选择EO以外的任何其他内容，我希望在下一个下拉菜单中禁用英语，因为如果LangFluency是EL，RFEP，IFEP或TBD，则PrimaryLanguage不能是英语。

PrimaryLanguage选项列表非常广泛，目前只有一堆静态条目，例如（01）西班牙语LangFluency选项只是上面列出的五个。

有人可以帮帮我吗？

谢谢， Schelly

Answer 1

我会使用数据结构来显示语言之间的关系，然后使用一些逻辑来填充下拉列表。

这是一个例子（我没有测试并且有一些不好的风格，但至少会给你正确的想法）：

<!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>

动态填充选择列表的最佳方法

1 个答案: