Bonjour ! J'ai un projet où une de mes pages me pose problème... Je dois faire apparaître des menus en fonction du choix effectué dans le menu d'avant , j'ai donc utilisé la fonction onchange()... Les 3ers menus s'affichent correctement , il n'y a que le 4e ou ça pose problème... Il doit apparaître quand on choisit une option autre que "generic" dans le 3e menu. Or la fonction associé à son apparition s'exécute avant même qu'on ne fasse un choix dans le menu d'avant. Voici le code :
page.html :
script javascript de cette page :
Merci beaucoup d'avance pour votre aide.
page.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Accueil - Affectation Interface</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/styleLD.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Menu
</a>
</li>
<li>
<a href="user.html">user formulaire</a>
</li>
<li>
<a href="groupe.html">groupe formulaire</a>
</li>
<li>
<a href="map.html">map formulaire</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Contenu de la page -->
<div id="page-content-wrapper">
<div class="container-fluid">
<h1 id='grandtitre'>Bienvenue dans l'interface d'affectation</h1>
<a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Menu</a>
<div id='divSituation'>
<p>Sélectionner un scope :</p>
<select name="selectScope" id='selectScope' onchange="selectScopeChooseConsequences()">
<option>global</option>
<option>specific</option>
</select>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="jquerryLD/pageAccueilscript.js" type="text/javascript"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
script javascript de cette page :
/* Script pour gérer l'apparaition des menus déroulants en fonction
* des choix faits dans les menus */
//Variables globales
//code html du menu de séléction de l'environnement
var menuSelectEnvt = "<p>Selectionner un environnement</p> <select id='selectEnvt'> <option>Envt1</option> <option>Envt2</option></select>";
//code html du menu de séléction de hiera
var menuSelectHiera = "<p>Selectionner une hiérarchie</p> <select id='selectHiera'> <option>generic</option> <option>optionB</option></select>";
//code html du menu de sélection de host groupe
var menuSelectHostGroup = "<p>Selectionner un host group</p> <select id='selectHostGroup'> <option>hostA</option><option>hostB</option></select>";
//Déclaration des fonctions
//fonction selectScopeChooseConsequences = gestion des evènements en fonction
// du choix dans selectScope :
// *si choix = "global" , seul selectScope est visible
// *si choix = "specific", apparition du 2e menu (selectEnvt) + 3e menu (selectHiera)
function selectScopeChooseConsequences() {
var choixSelectScope = document.getElementById('selectScope').value;
//si on choisit "specific"
if (choixSelectScope != "global") {
apparitionMenuChooseEnvt(); //apparition du menu selectEnvt
apparitionMenuChooseHiera(); //apparition du menu selectHiera
}
}
;
//fonction selectHieraChooseConsequences() = gestion des evènements en fonction
// du choix dans selectHiera :
// *si choix = "generic" , seul les menus selectScope, selectEnvt , selectHiera sont visibles
// *si choix != "generic", le 4e menu (selectHostGroup) apparait
function selectHieraChooseConsequences() {
var choixSelectHiera = document.getElementById('selectHiera').value;
alert(choixSelectHiera);
if (choixSelectHiera != "generic") {
apparitionMenuChooseHostGroup();
}
}
;
/*fonction apparitionMenuChooseEnvt() = ajoute le second menu si il n'existe pas déjà
au clic sur une option autre que "global" du menu selectScope*/
function apparitionMenuChooseEnvt() {
if (!document.getElementById('selectEnvt')) {
$('#divSituation').append(menuSelectEnvt);
}
}
;
/*fonction apparitionMenuChooseHiera() = ajout le 3e menu si il n'existe pas déjà*/
function apparitionMenuChooseHiera() {
if (!document.getElementById('selectHiera')) {
$('#divSituation').append(menuSelectHiera);
document.getElementById('selectHiera').onchange = selectHieraChooseConsequences() ;
}
}
;
/*fonction apparitionMenuChooseHostGroup() = ajoute le 4e menu si il n'existe pas déjà
au clic sur une option autre que "global" du menu selectHiera*/
function apparitionMenuChooseHostGroup() {
if (!document.getElementById('selectHostGroupe')) {
$('#divSituation').append(menuSelectHostGroup);
}
}
;
Merci beaucoup d'avance pour votre aide.