Question

我是Web编程的新手，我正在尝试使用html和js进行级联的下拉菜单。我发现了一些示例，例如正在修改的示例，这些示例似乎对我有用。输入最终将是一个单独的JSON文件。

我已隔离问题并创建了以下capture.html：

<head>
    <script src="dropdn.js"></script>

</head>
    <select id="menu1">
    <option value="" selected="selected"></option>
            </select>     
    <br>      
    <select id="menu2">
        <option value="" selected="selected"></option>
            </select>      
    <br>  
    <select id="menu3">
        <option value="" selected="selected"></option>
            </select>

带有js文件：

var menudata = {
    "CX": {
        "C1": {
            "SX": {
                "G1": []
            }
        },
        "C2": {
            "C2a": {
                "G2": []
            }
        },
        "CL": {
            "L1": {
                "AB": [],
                "OP": []
            },
            "L2": {
                "HP": [],
                "OP": []
            },
            "L3": {
                "OP": [],
                "SI": []
            }
        },
        "PL": {
            "CM": {
                "EI": [],
                "SI": []
            },
            "LG": {
                "AB": [],
                "OP": []
            },
            "PC": {
                "P1": [],
                "PC": []
            }
        },      
    }
}

window.onload = function () {

    //Get html elements
    var menu1 = document.getElementById("menu1");
    var menu2 = document.getElementById("menu2");   
    var menu3 = document.getElementById("menu3");

    //Load menus
    for (var location in menudata) {
        menu1.options[menu1.options.length] = new Option(location, location);
    }

    //menu1 Changed
    menu1.onchange = function () {       
        menu2.length = 1; // remove all options bar first
        menu3.length = 1; // remove all options bar first    
        if (this.selectedIndex < 1)
            return;      
        for (var facility in menudata[this.value]) {
            menu2.options[menu2.options.length] = new Option(facility, facility);
        }
    }   
    //menu2 Changed
    menu2.onchange = function () {       
        menu3.length = 1; // remove all options bar first
        if (this.selectedIndex < 1)
            return;
        for (var area in menudata[menu1.value][this.value]) {
            menu3.options[menu3.options.length] = new Option(area, area);
         }
    }   
}

当我运行捕获时，一切似乎都正常运行；但是，如果我尝试将capture.html加载到index.html中，则会丢失所有数据（空白下拉列表）。这是一个示例：

<!DOCTYPE html>

<head>
  <script src="jquery-3.3.1.min.js"></script>
  <script src="dropdn.js"></script>  
<script>
$(document).ready(function(){   
    $("button").click(function(){
    $("#div1").load("capture.html");
  });
});    
</script>

</head>
<body>
<h1>Test load of capture.html</h1>
</br>
<div id="div1"><button>Load Capture.html</button></div>


</body>
</html>

有人可以解释为什么会这样以及如何解决吗？我已经尽可能地了解了与窗口加载有关的内容，但是距离还很远。我想我在这里错过了一个基本概念。

先谢谢您！

Answer 1

尝试删除 index.html 中的脚本 dropdn.js ，因为该.js要求 capture.html

可以使用getElementById

Answer 2

您的dropdn.js脚本依赖window.onload（）。当index.html触发其window.onload触发时，要填充的元素尚不存在，因此脚本失败。当将capture.html加载到div中时，不会再次触发index.html的onload事件，因此该函数不会运行。

因此，我建议从脚本中删除onload并使其成为一个函数。然后，您可以使用JQuery.load()的回调函数实际触发该函数。

因此，为了使其尽可能简单，我建议尝试以下操作：

1）。从capture.html删除脚本和head标签，使其仅包含<select>标签和<option> s。

2）将dropdn.js更改为：

var populate_dropdowns = function() {
    //...your dropdown code...
}

代替window.onload = function() { ...your dropdown code... }

3）将脚本标签从index.html中的<head>内部移到<body>标签的底部，并在其中添加dropdn.js脚本：

    <div id="div1"><button>Load Capture.html</button></div>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="dropdn.js"></script>
    <script>
      $(document).ready(function(){   
         //... inline code...
      }); 
    </script>
</body>
</html>

4）使用JQuery.load（）的回调函数来触发函数，以便在尝试更改它们之前确保div包含您的节和选项。

$(document).ready(function(){   
    $("button").click(function(){
    $("#div1").load("capture.html", function() {
      populate_dropdowns();
    });
  });
});

JavaScript级联下拉加载问题

2 个答案: