Résolu récupération des valeur d'une liste déroulante contenue dans un popup

  • Auteur de la discussion La Sagesse affricaine
  • Date de début

La Sagesse affricaine

Nouveau membre
Bonjour,
je souhaite faire en sorte d'un utilisateur clique sur "choix" un Popup apparait qui va contenir une liste défilante de catégorie. L'utilisateur sélectionne la catégorie de son choix, s'il y a une sous catégorie 1, l'utilisateur la verra après déroulé la première catégorie, s'il y a une sous categorie 2, il la verra jusqu'à ce kil choisisse dans la bonne sous categorie et il valide.Après validation le popup se referme seul et affiche la "path" de la catégorie sélectionner par l'utilisateur. Mais je suis bloqué :/:/:??: dans la récupération du path pour l'afficher dans un <div> </div> car je ne sais pas comment coder ca. Quelqu'un pourrait t'il m'aider?

mes codes:

fichier test.html contenant la liste déroulante:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">

<title>Vertical Navigation Menu: CSS3 Coded</title>

<link rel="stylesheet" href="css/styles.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>
<body>

<div id="content">
<ul class="menu">
<li class="item1"><a href="#">Burkina</a>
<ul class="menu">
<li class="toggleSubMenu">
<a href="#">Kadiogo</a>
<ul class="navigation">
<li class="toggleSubMenu"><a href="#"> Ouagadougou </a>
<ul class="subMenu">
<li><a href="#" title="Aller au secteur 1">secteur 1</a></li>
<li><a href="#" title="Aller au secteur 2">secteur 2</a></li>
<li><a href="#" title="Aller au secteur 2">secteur 3</a></li>
</ul>
</li>
<li><a href="#"> Saaba </a></li>
<li><a href="#"> Komki-Ipala </a></li>
</ul>
</li>
<li class="subitem2">
<a href="#"> Houet </a>
<ul>
<li><a> Bama </a></li>
<li><a> Bobo-Dioulasso </a></li>
<li><a> Dandé </a></li>
<li><a>Faramanaadéma </a></li>
</ul>
</li>
<li class="subitem3">
<a href="#">Balé</a>
<ul>
<li> <a> Bagassi </a></li>
<li> <a> Boromo </a></li>
<li> <a> Poura </a> </li>
</ul>
</li>
</ul>
</li>
<li class="item2"><a href="#">Togo <span>147</span></a>
<ul>
<li class="subitem1"><a href="#">Lome </a></li>
</ul>
</li>
<li class="item3"><a href="#">Ghana<span>340</span></a>
<ul>
<li class="subitem1"><a href="#"> Accra<span>14</span></a></li>
<li class="subitem2"><a href="#">Tema<span>6</span></a></li>
<li class="subitem3"><a href="#">Takoradi<span>2</span></a></li>
</ul>
</li>
<li class="item4"><a href="#">Blog<span>222</span></a>
<ul>
<li class="subitem1"><a href="#">Santé<span>14</span></a></li>
<li class="subitem2"><a href="#">Nutrition<span>6</span></a></li>
</ul>
</li>
</ul>

</div>

<!--initiate accordion-->
<script type="text/javascript">
$(document).ready( function ()
{
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();

// On sélectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function ()
{
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;

// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0)
{
$(this).next("ul.subMenu").slideUp("normal");
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
// $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
}
// On empêche le navigateur de suivre le lien :
return false;
});

}) ;
$(function()
{

var menu_ul = $('.menu > li > ul'),menu_a = $('.menu > li > a');

menu_ul.hide();

menu_a.click(function(e)
{
e.preventDefault();
if(!$(this).hasClass('active'))
{
$(this).next("ul.menu").slideUp("normal");
$(this).addClass('active').next().stop(true,true).slideDown('normal');
}
else
{
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');

}
});
});
</script>
</body>
</html>

fichier popup.html qui ouvrir le popup et qui contient le <div></div> où je souhaite afficher la valeur obtenue lors de la sélection:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ouvrir une pop-up et la centrer en javascript</title>
<script type="text/javascript">
function PopupTableau()
{
//w=open("test.html",'','width=400,height=400,menubar=no,toolbar=no,scrollbars=no,resizable=no');
width = 450;
height = 400;
var left=0;
var top=0;
left = (screen.width-width)/2;
top = (screen.height-height)/2;
window.open("test.html","PopUp","width="+width+",height="+height+",location=yes,status=no,toolbar=no,scrollbars=no, top="+top+", left="+left);
}
</script>
<style>
.boutonInput
{
width: 750px;
border: 1px solid #000;
margin: 3px;
padding: 3px;
height: 32px;
}
.resultatPopup
{
float: left;
margin: 5px;
color: #555;
font-size:15px;
}
</style>
</head>
<body>
<div>Adresse:</div>
<div class="boutonInput"><div class="resultatPopup"> </div><div style="float:right;"><button href="" onclick="PopupTableau();">choix</button></div></div>
</body>
</html>

Merci d'avance pour votre disponibilité
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 098
Messages
6 717 050
Membres
1 586 282
Dernier membre
Yannick3553
Partager cette page
Haut