Je suis nouveau dans la programmation Web et j'essaie de créer un menu déroulant en cascade en utilisant html et js. J'ai trouvé des exemples, comme celui que je modifie, qui semblent fonctionner pour moi. L'entrée sera finalement un fichier JSON séparé.

J'ai isolé le problème et créé le fichier capture.html suivant :

<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>

Avec un fichier 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);
         }
    }   
}

Lorsque je lance la capture, tout semble fonctionner correctement ; cependant, si j'essaye de charger le capture.html dans un index.html, toutes mes données sont perdues (listes déroulantes vides). Ceci est un exemple:

<!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>

Quelqu'un peut-il expliquer pourquoi cela se produit et comment y remédier? Je suis allé aussi loin que quelque chose à voir avec le chargement de la fenêtre, mais je ne vais pas très loin. Je suppose qu'il me manque un concept fondamental ici.

Merci d'avance!

-1
Steve Bell 15 mars 2019 à 17:50

2 réponses

Meilleure réponse

Votre script dropdn.js repose sur window.onload(). Lorsque index.html obtient son window.onload déclenché, les éléments que vous souhaitez remplir n'existent pas encore, donc le script échoue. Lorsque capture.html est chargé dans le div, l'événement onload d'index.html n'est plus déclenché, donc la fonction ne s'exécute pas.

Je suggérerais donc de supprimer onload du script et d'en faire une fonction. Ensuite, vous pouvez utiliser le rappel de JQuery.load() pour déclencher réellement la fonction.

Donc, pour rester aussi simple que possible, je suggère d'essayer ce qui suit:

1) Supprimez le script et la balise head de capture.html afin qu'il ne contienne que les balises <select> et <option>.

2) Remplacez dropdn.js par quelque chose comme :

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

Au lieu de window.onload = function() { ...your dropdown code... }

3) Déplacez vos balises de script de l'intérieur <head> dans index.html vers le bas de la balise <body> et ajoutez-y également le script 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) Utilisez le rappel de JQuery.load() pour déclencher votre fonction afin que vous soyez sûr que le div contient vos sections et options avant d'essayer de les modifier.

$(document).ready(function(){   
    $("button").click(function(){
    $("#div1").load("capture.html", function() {
      populate_dropdowns();
    });
  });
});  
0
Shilly 15 mars 2019 à 15:26

Essayez de supprimer le script dropdn.js dans le index.html, car ce .js attend capture.html

Est prêt à être utilisé getElementById

0
estevanj 15 mars 2019 à 15:18