Créer automatiquement une listes déroulantes?

Ktou -  
 Ktou -
Bonjour, :D

Cela fais plusieurs heures que je cherche sans succès une réponse, mais j'ai rien trouvé.

Voici la situation:
Je prépare un site qui permettra de créer des blogs (pour m'entrainer et apprendre plus que par nécessité :p), et je bloque sur un truc bête (enfin je crois :-° ).

Je voudrai permettre aux internautes de choisir leur liens (leur menu) parmi une liste déroulantes avec 20 possibilités. Et pour faire une jolie présentation, je voudrai que l'internaute puisse cliquer sur un bouton "+" ou "-" pour ajouter ou enlever des listes déroulantes.
Par exemple, ils auraient une liste (pour faire un 1er élément de leur menu) puis il devront cliquer sur "+" pour rajouter un 2eme éléments... et ainsi de suite...

Malgré que je ne connaisse rien en javascript, j'ai tout de même trouvé un code pour rajouter des zones de textes, mais rien pour générer des menu déroulants.

J'ai exploité quelques idées, mais tout est tombé à l'eau à cause de mes contraintes:
1-Chaque liste doit avoir un name:"" différent (type "lien1", "lien2",ect...)
2-Je dois pouvoir enregistrer tout ça dans ma base de donnée ensuite...

J'avoue que mon cerveau tourne en boucle et je ne sais plus quoi faire... o_O utiliser que du php (c'est possible??) ou je peux utiliser du javascript pour généré des listes déroulantes qui auraient des attributs "name" différentes...?

Tout vos conseils seraient la bienvenu ^^
A voir également:

3 réponses

Réponse 1 / 3
pazz
 
voila un petit code que je vient de faire (vite fait)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
</head>

<body>

<div id='Ctn'>

<dl id="menu">
	  	<dt onclick="DsiplayMenu(1);" id="menu1"><a href="#">Menu1</a></dt>
			<dd id="M1">
             	<ul>
				<li><a href="#">test</a></li>
                <li><a href="#">test</a></li>
				<li><a href="#">test</a></li>
                <li onclick="AddSmenu(this);"><a href="#">+</a></li>
				</ul>
			</dd>	
        <dt onclick="DsiplayMenu(2);" id="menu1"><a href="#">Menu2</a></dt>
			<dd id="M2">
             	<ul>
				<li><a href="#">test2</a></li>
                <li><a href="#">test2</a></li>
				<li><a href="#">test2</a></li>
                <li onclick="AddSmenu(this);"><a href="#">+</a></li>
				</ul>
			</dd>	
        <dt onclick="AddMenu(this);" id="menu1"><a href="#">+</a></dt>
</dl>

</div>

</body>
</html>


CSS: 
@charset "utf-8";
body{
margin:0px;
padding:0px;
height:100%;
font-family:Arial, Helvetica, sans-serif;
}
/* CSS Document */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
margin:0px;
padding:0px;
font-size:10pt;
}

#menu dt {
width:145px;
text-align: center;
cursor: pointer;
}
#menu dt a{
height: 20px;
width:145px;
display: block;
border: 1px solid #1E4658;
color: #fff;
text-decoration: none;
background-color:#457F9A;
}

#menu li {
text-align: center;
height:20px;
width:145px;
border:1px solid #457F9A;
margin-bottom:2px;
}
#menu li a {
height:15px;
width:145px;
display: block;
text-decoration: none;
color: #000;
background-color:#C2DEEB;
}

#menu li a:hover{
display: block;
background-color:#D7E9F1;
}
#menu dd{
display:none;
}

.ButOk{
background-color:#448EB0;
color:#fff;
cursor:pointer;
}


Javascript: 
function DsiplayMenu(x){
	var NBR = document.getElementById('menu').getElementsByTagName('dd').length;
	for(i=1;i<=NBR;i++){
		if(i!=x){
			document.getElementById('M'+i).style.display = 'none';
		}
		else{
			document.getElementById('M'+i).style.display = 'block';
		}
	}
}

function AddSmenu(Obj){
	
	var Parent = Obj.parentNode;
		// pour suprimer le onclick
		Parent.removeChild(Obj);
		Parent.appendChild(Obj);
		Obj.onclick = function(){}
		
	Obj.innerHTML = '';

	var Input = document.createElement('input');
		Input.type = 'text';
		Input.style.width='145px';
		Input.style.border = '0px';
		Obj.appendChild(Input);
	
	var Ok = document.createElement('div');
		Ok.className = 'ButOk';
		Ok.innerHTML = 'OK';
		Obj.appendChild(Ok);
		
		Ok.onmousedown = function(){
				Parent.removeChild(Obj);
				
			var NewMenu = document.createElement('li');
				NewMenu.innerHTML = "<a href='#'>"+Input.value+"</a>";
				Parent.appendChild(NewMenu);
				
				Parent.appendChild(Obj);
				Obj.onclick = function(){AddSmenu(Obj);}
				Obj.innerHTML="<a href='#'>+</a>";
		}
}

function AddMenu(Obj){
	var Parent = Obj.parentNode;
	
		// pour suprimer le onclick
		Parent.removeChild(Obj);
		Parent.appendChild(Obj);
		Obj.onclick = function(){}
	
	Obj.innerHTML = '';
	
	var Input = document.createElement('input');
		Input.type = 'text';
		Input.style.width='145px';
		Input.style.border = '0px';
		Obj.appendChild(Input);
	
	var Ok = document.createElement('div');
		Ok.className = 'ButOk';
		Ok.innerHTML = 'OK';
		Obj.appendChild(Ok);
		
		Ok.onmousedown = function(){
			Parent.removeChild(Obj);
			var NBR = document.getElementById('menu').getElementsByTagName('dd').length;
			NBR+=1;
			
			var NewMenu = document.createElement('dt');
				NewMenu.innerHTML = "<a href='#'>"+Input.value+"</a>";
				NewMenu.onclick = function(){
					DsiplayMenu(NBR);
				}
				Parent.appendChild(NewMenu);
			
			var Newdd = document.createElement('dd');
				Newdd.id = 'M'+NBR;
				Parent.appendChild(Newdd);
			
			var NewUl = document.createElement('ul');
				Newdd.appendChild(NewUl);
						
			var Newli = document.createElement('li');
				Newli.innerHTML="<a href='#'>+</a>";
				Newli.onclick = function(){AddSmenu(Newli);}
				NewUl.appendChild(Newli);
				
				Parent.appendChild(Obj);
				Obj.onclick = function(){AddMenu(Obj);}
				Obj.innerHTML="<a href='#'>+</a>";
		}
}



voila
1
Ktou
 
OMG!!! Tu nous à sorti un truc de fou!! xD

Merciiiiiiii beaucoup de ton aide!
étant 1h du matin et ayant trop travaillé aujourd'hui je n'ai pas le courage de toucher à ton code. Je l'ai juste placer dans une page vierge pour voir se que ça donnait.
C'est incroyable ce que tu as fais en quelques heures!

Pour être franc, je pense que je me suis mal exprimé... Ce n'est pas un menu déroulant que je voulais faire mais une liste déroulante (de formulaire) du genre : 
<form method="post" action="etape3.php">

	<select name="menu1" id="select">
	<?php include("menudispo.php") ?> 
	</select>

	<select name="menu2" id="select">
	<?php include("menudispo.php") ?>
	</select>
</form>


En fait l'idée se serait d'avoir une liste déroulante (avec un choix pour les internautes), avec un bouton "+" pour que l'internaute puisse afficher une 2eme liste déroulante (identique), puis une 3eme, ect ect... jusqu'a 20 choix si il le désire... Mon problème principale étant que je dois l'enregistrer dans une base sql...

Code de "menudispo.php": 
<optgroup label="Acceil">
	<option value="acceuil">Accueil</option>
</optgroupe>

(...)

<optgroup label="Annexe">
	<option value="livredor">Livre d'Or</option>
	<option value="contact">Nous contacter</option>
</optgroup>


En tout cas je vais essayé de m'inspirer de ce code déjà pour essayer de l'adapter à mon besoin, je pense que cela m'aidera grandement. =^.^=
0
Réponse 2 / 3
pazz
 
regarde du côter de javascript et de "document.createElement" regarde également du côter d'ajax
0
Réponse 3 / 3
Ktou
 
Waoh... o_O
Merci beaucoup de la réponse! J'essaierai tout ça ce soir voir ce que ça donne (horaire canada).
Je te tiens au jus ^_^
0