动态渲染关联的下拉表单

目的：创建了两个下拉表，第二个下拉表内容暂时为空，想用两个数组填充，通过判断下拉表一的值选择对应的数组放入表二。
问题：表二填充失败
<div>
                <span>Select your favourite team:</span>
                <select onchange="teamSelected(this.value)" id="team">
                    <option value="">Please select a team:</option>
                    <option value="Avengers">Avengers</option>
                    <option value="JLA">Justice League</option>
                </select>
            </div>            <div>
                <span>Select your favourite hero:</span>
                <select id="hero">
                </select>
            </div>
-------------------------------------------------------------------------------
<script>
        var avengers = ["Captain America", "Iron Man", "Thor", "Hulk", "Black Widow", "Hawkeye"];
        var jla = ["Superman", "Batman", "Wonder Woman", "Flash", "Green Lantern", "Aquaman"];        var heroSelect = Document.getElementById("hero");
        var myselect=document.getElementById("team");
        var index=myselect.selectedIndex ;
        var value=myselect.options[index].value ;
                if (value == "Avengers") {            avengers.forEach(function (item) {
                var option = Document.createElement("option");
                option.text = item;
                option.value = item;
                heroSelect.add(option);
            });
        } else if (value == "JLA") {            jla.forEach(function (item) {
                var option = Document.createElement("option");
                option.text = item;
                option.value = item;
                heroSelect.add(option);
            });
        } 
    </script>

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
            <span>Select your favourite team:</span>
            <select onchange="teamSelected()" id="team">
                <option value="">Please select a team:</option>
                <option value="Avengers">Avengers</option>
                <option value="JLA">Justice League</option>
            </select>
        </div>    <div>
            <span>Select your favourite hero:</span>
            <select id="hero">
            </select>
        </div>
    </body>
    </html>
        function teamSelected() {
            var avengers = ["Captain America", "Iron Man", "Thor", "Hulk", "Black Widow", "Hawkeye"];
            var jla = ["Superman", "Batman", "Wonder Woman", "Flash", "Green Lantern", "Aquaman"];        var heroSelect = document.getElementById("hero");
            var myselect = document.getElementById("team");
            var index = myselect.selectedIndex;
            var value = myselect.options[index].value;        //清空选项
            heroSelect.length = 0;        if (value == "Avengers") {
                avengers.forEach(function (item) {
                    var option = document.createElement("option");
                    option.text = item;
                    option.value = item;
                    heroSelect.add(option);
                });
            } else if (value == "JLA") {
                jla.forEach(function (item) {
                    var option = document.createElement("option");
                    option.text = item;
                    option.value = item;
                    heroSelect.add(option);
                });
            }
        }
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
        <title></title></head>
    <body>
    <div>
                    <span>Select your favourite team:</span>
                    <select onchange="teamSelected(this.value)" id="team">
                        <option value="">Please select a team:</option>
                        <option value="Avengers">Avengers</option>
                        <option value="JLA">Justice League</option>
                    </select>
                </div>            <div>
                    <span>Select your favourite hero:</span>
                    <select id="hero">
                    </select>
                </div>
    -------------------------------------------------------------------------------
    <script>
           var avengers = ["Captain America", "Iron Man", "Thor", "Hulk", "Black Widow", "Hawkeye"];
            var jla = ["Superman", "Batman", "Wonder Woman", "Flash", "Green Lantern", "Aquaman"];
    function teamSelected(value){
    //清空选项      hero.length = 0;if(value=="Avengers"){
    avengers.forEach(function (item) {
    //alert(item)
    add_myOption(item)
    })}else if(value=="JLA"){
    jla.forEach(function (item) {
    //alert(item)
    add_myOption(item)
    })}
    }
        </script><script>
    function add_myOption(myitem){
    myOption=document.createElement("option");
    myOption.text=myitem;
    myOption.value=myitem;  
    hero.add(myOption);
    } 
    </script>
    </body>
    </html>