Javascript级联下拉加载问题

Question

我是网络编程的新手，我正在尝试使用 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 中删除 script 和 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 个解决方案

解决方案1
0 2019-03-15 15:18:11

解决方案2
0 已采纳 2019-03-15 15:21:10

Javascript级联下拉加载问题

问题描述

2 个解决方案

解决方案1 0 2019-03-15 15:18:11

解决方案2 0 已采纳 2019-03-15 15:21:10

解决方案1
0 2019-03-15 15:18:11

解决方案2
0 已采纳 2019-03-15 15:21:10