Javascript级联下拉加载问题_Javascript_Html

Javascript级联下拉加载问题

javascript html

Javascript级联下拉加载问题,javascript,html,Javascript,Html,我是网络编程新手，我正在尝试使用html和js制作一个级联下拉菜单。我发现了一些例子，比如我正在修改的那个，似乎对我有用。输入最终将是一个单独的JSON文件我已经隔离了该问题，并创建了以下capture.html： <head> <script src="dropdn.js"></script> </head> <select id="menu1"> <option value="" selected=

我是网络编程新手，我正在尝试使用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);
         }
    }   
}

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”：[]
},
“个人电脑”：{
“P1”：[]，
“个人电脑”：[]
}
},      
}
}
window.onload=函数（）{
//获取html元素
var menu1=document.getElementById（“menu1”）；
var menu2=document.getElementById（“menu2”）；
var menu3=document.getElementById（“menu3”）；
//加载菜单
用于（菜单数据中的变量位置）{
menu1.options[menu1.options.length]=新选项（位置，位置）；
}
//菜单1已更改
menu1.onchange=函数（）{
menu2.length=1；//首先删除所有选项栏
menu3.length=1；//首先删除所有选项栏
如果（此.selectedIndex<1）
返回；
for（menudata中的var工具[this.value]）{
menu2.options[menu2.options.length]=新选项（设施，设施）；
}
}   
//菜单2已更改
menu2.onchange=函数（）{
menu3.length=1；//首先删除所有选项栏
如果（此.selectedIndex<1）
返回；
for（menudata[menu1.value][this.value]中的变量区域）{
menu3.options[menu3.options.length]=新选项（面积，面积）；
}
}   
}

当我运行capture时，一切似乎都很好；但是，如果我尝试将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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#div1”）.load（“capture.html”）；
});
});    
capture.html的测试负载


Load Capture.html

有人能解释为什么会发生这种情况以及如何解决它吗？我已经做了一些与窗口加载有关的事情，但我不会做得太远。我猜我缺少一个基本的概念

提前谢谢你

尝试删除index.html中的脚本dropdn.js，因为这个.js需要capture.html

已准备好使用getElementById

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

因此，我建议从脚本中删除onload，并将其作为一个函数。然后可以使用

JQuery.load（）

的回调来实际触发该函数

因此，为了尽可能简单，我建议尝试以下方法：

1）从capture.html中删除脚本和head标记，使其仅包含

标记和

2）将dropdn.js更改为：

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

而不是

window.onload=function（）{…您的下拉代码…}

3）将脚本标记从index.html中的

移动到

标记的底部，并在那里添加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>

非常感谢-这解决了我的问题-非常好的解释

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