Блог

Главная - Вопросы по программированию - Проблема с загрузкой каскадного выпадающего списка Javascript

Проблема с загрузкой каскадного выпадающего списка Javascript

#javascript #html

#javascript #HTML

Вопрос:

Я новичок в веб-программировании и пытаюсь создать каскадное выпадающее меню, используя 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, кажется, что все работает нормально; однако, если я попытаюсь загрузить 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>

Кто-нибудь может объяснить, почему это происходит и как это исправить? Я добрался до того, что что-то связано с загрузкой окна, но я не продвинулся очень далеко. Я предполагаю, что мне здесь не хватает фундаментальной концепции.

Заранее благодарю вас!

Ответ №1:

Ваш dropdn.js скрипт полагается на window.onload(). Когда index.html запускается window.onload, элементы, которые вы хотите заполнить, еще не существуют, поэтому скрипт завершается с ошибкой. Когда capture.html загружается в div событие onload из index.html снова не запускается, поэтому функция не запускается.

Поэтому я бы предложил удалить onload из скрипта и просто сделать его функцией. Затем вы можете использовать обратный вызов JQuery.load() для фактического запуска функции.

Итак, чтобы все было как можно проще, я бы предложил попробовать следующее:

1) Удалите скрипт и тег head из capture.html так что он содержит только <select> теги и <option> s.

2) Изменить dropdn.js должно быть что-то вроде:

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

вместо window.onload = function() { ...your dropdown code... }

3) Переместите теги вашего скрипта изнутри <head> в index.html в нижней части <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();
    });
  });
});

Комментарии:

1. Большое вам спасибо — это решило мою проблему — отличное объяснение

Ответ №2:

попробуйте удалить скрипт dropdn.js в index.html , потому что this .js ожидает capture.html

готов к использованию getElementById