menu deroulant 'interactif'

01 juil. 2005, 14:23

Bonjour.
Voila, je vous explique mon probleme:
Je cherche, en javascript si possible, voire en php pourquoi pas, a créere un menu déroulant qui me permet, en selectionnant une option, d'afficher du texte dans une zone de la page. (en loccurence, il s'agit d'afficher un exemple de taille de texte en selectionnant celle ci dans le menu deroulant).

Pour l'instant, j'ai utilis' onchang"="mafonction()" qui m'ecris quelque chose de potable, mais dans une autre page, et blanche

Code : Tout sélectionner

<select name="taille" onchange="ex_taille()">
	<option value="1"> 1</option>
	<option value="2" selected> 2</option>
	<option value="3"> 3</option>
	<option value="4"> 4</option>
</select>
...
<script>
function ex_taille() {
	var taille = document.F1.taille.selectedIndex;
	taille = taille+1;
	{
		document.write("<font size="+taille+"><b>Exemple taille    "+taille+"</b></font>");
	}
}
</script>

ce que j'aimerais, c'est ecrire cet exemple a coté du menu déroulant...
C'est grave, docteur?

01 juil. 2005, 15:24

J'ai pensé aussi a pré écrire mes exemples dans des div, et de mettre ceux-ci a visibilty:hidden, et, selon ce que je selectionne, de les mettre a visibility:visible (en utilisant des classes par exemple)
mais jaimerais que les textes restent au meme endroit:

Merci par avance de votre aide

01 juil. 2005, 16:20

document write c'est pas top pour faire du dynamique : ca va ajouter les valeurs après la balise html (car la page a fini son chargement) => po top

moi je suggérerais un

<div id="contenu"></div>
[...]
<script>
...
document.getElementById("contenu").innerHtml="blah blah blah";
...
</script>

pour l'approche *stockage* ca dépend du nombre de valeurs différentes et de la taille du texte par valeur.
Les geek pur et dur étant en général assez HiTech te suggéreront de passer par du XMLRpc.
Plus classique mais gourmant en bande passante : stocker le contenu de chaque valeur dans un tableau JS
Enfin, l'approche polyvalente : php avec envoi de formulaire

01 juil. 2005, 19:24

Enfin, l'approche polyvalente : php avec envoi de formulaire

...euh... cad?
[/quote]

01 juil. 2005, 19:25

en tout cas merci beaucoup !!!!!!!

01 juil. 2005, 19:45

euh... en fait ca marche pas...
voici mon code:

Code : Tout sélectionner

<FORM action="ins_msg.php" method="post" name="F1">
	<table border=1 cellpadding=0 cellspacing=10>
	<tr>
		<td>Taille du texte: </td>
		<td><select name="taille" onchange="ex_taille()">
				<option value="1"> 1</option>
				<option value="2" selected> 2</option>
				<option value="3"> 3</option>
				<option value="4"> 4</option>
			</select>
		</td>
	</tr><tr>
	    <td>Vitesse de défilement: </td>
	    <td><select name="vitesse" width=100>
				<option value="1"> 1</option>
				<option value="2"> 2</option>
				<option value="3"> 3</option>
				<option value="4"> 4</option>
				<option value="5" selected> 5</option>
				<option value="6"> 6</option>
				<option value="7"> 7</option>
				<option value="8"> 8</option>
				<option value="9"> 9</option>
				<option value="10">10</option>
			</select>
		</td>
	</tr><tr>

		    <td>Message defilant: </td>
	    <td><TEXTAREA cols=30 rows=6 name=msg onFocus="this.value=''">Entrez ici le message a ajouter</TEXTAREA>
	</tr><tr>
	    <td colspan=2><INPUT type=submit value="AJOUTER LE MESSAGE"  style="font-family: Arial,Verdana,Helvetica;font-size: 11px; color:white ;font-weight:bold;background-color: black;width:100%;"></td>
	</tr>
	</table>
</FORM>
<div id="contenu_taille"></div>

<script>
function ex_taille() {
	var taille = document.F1.taille.selectedIndex;
	taille = taille+1;
	{
		document.getElementById("contenu_taille").innerHtml="blah";
	}
}
</script>

01 juil. 2005, 20:49

une solution serait d'ouvrir une popup, non?

04 juil. 2005, 09:14

voila un code en JS :

<html><head>
<script language="javascript">
	function ex_taille() {
		var taille = document.getElementById("vitesse").selectedIndex+1;
		document.getElementById("contenu_taille").innerHTML=taille;
	}
</script> 
</head><body><FORM action="ins_msg.php" method="post" id="F1">
   <table border=1 cellpadding=0 cellspacing=10>
   <tr>
      <td>Taille du texte: </td>
      <td><select name="taille" onchange="ex_taille()">
            <option value="1"> 1</option>
            <option value="2" selected> 2</option>
            <option value="3"> 3</option>
            <option value="4"> 4</option>
         </select>
      </td>
   </tr><tr>
       <td>Vitesse de défilement: </td>
       <td><select name="vitesse" id="vitesse" width="100" onchange="ex_taille()">
            <option value="1"> 1</option>
            <option value="2"> 2</option>
            <option value="3"> 3</option>
            <option value="4"> 4</option>
            <option value="5" selected> 5</option>
            <option value="6"> 6</option>
            <option value="7"> 7</option>
            <option value="8"> 8</option>
            <option value="9"> 9</option>
            <option value="10">10</option>
         </select>
      </td>
   </tr><tr>

          <td>Message defilant: </td>
       <td><TEXTAREA cols=30 rows=6 name=msg onFocus="this.value=''">Entrez ici le message a ajouter</TEXTAREA>
   </tr><tr>
       <td colspan=2><INPUT type=submit value="AJOUTER LE MESSAGE"  style="font-family: Arial,Verdana,Helvetica;font-size: 11px; color:white ;font-weight:bold;background-color: black;width:100%;"></td>
   </tr>
   </table>
</FORM>
<div id="contenu_taille">rien</div>
</body></html>

Enfin, l'approche polyvalente : php avec envoi de formulaire
...euh... cad?

ben c le même style sauf qu'au lieu de faire l'affichage en JS avec innerHTML (qui, dans mon exemple, t'oblige a stocker le texte a afficher dans la page HTML lors de l'envoi => bcp transfert) tu le fait en php.
Pour ca, tu envoi le contenu du formulaire si il y a un changement dans la liste déroulante (au passage il faut préciser au moyen d'une variable cachée que le formulaire a été envoyé automatiquement et pas par un clic sur le bouton valider) et tu renvoie la même page en préremplissant le formulaire avec les valeurs déjà saisies et en ajoutant au bon endroit le texte dynamique correspondant a la valeur sélectionnée dans la liste

04 juil. 2005, 15:09

Euh...

mouais... en fait, g rien compris lol !!!!!!!
pour le script ke tu a eu lamabilité de me filer, c pas vraiment ca ke je cherchais a faire... mais du coup, j'ai tout simplement fais un bouton "afficher un exemple" qui ouvre une popup avec les differentes tailles lol
c rudimentaire mais bon...
Je crois ke l'achat d'un bouquin php est de rigueur pr la suite

menu deroulant 'interactif'

Qui est en ligne