11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU]Afficher un champ en fonction de l'option d'un <sele

bonjour tout le monde,

voila j'ai un petit probleme
j'ai un menu (select) de choix de pays et si l'utilisateur choisi autre une zone de texte dois s'afficher pour pouvoir saisir le nom du pays,
dans les attribut du select j'utilisais:
onchange="document.getElementById('idMonChampText').style.visibility='visible'"


ca bout de code fonctionne tres bien mais le probleme est que dans le cas d'un utilisateur trop pressé qui choisi en fait un des pays de la liste le champ de texte apparait toujours, j'ai donc essayer de faire ce mini script, mais qui ne fonctionne pas beaucoup...
<label for="menu" class="formlabel">Pays&nbsp;:</label>
  			<select id="menu" name="menuPays" tabindex="5">	
  				<option value="France" selected="selected">France</option>
				<option value="Dom-Tom">Dom-Tom</option>
				<option value="Belgique">Belgique</option>
				<option value="Suisse">Suisse</option>
				<option value="Autre" >Autre...</option>
			</select>
			<script language="javascript" type="text/javascript">
				if document.getElementById('menu').selectedIndex=4 {					document.getElementById('Autre').style.visibility='visible';
				else			document.getElementById('Autre').style.visibility='hidden';}
			</script>
		<input type="text" name="autrePays" id="Autre" class="autrePays" />


si quelqu'un voit le probleme ... Smiley decu ,
merci d'avance
Modifié par bedomon (22 Feb 2006 - 15:20)
Bonjour,
Je verrais plutôt un truc du style :


<select id="pays" onchange="document.getElementById('autre_pays').style.display = (this.options[this.selectedIndex].value=='autre'? 'block':'none');">
....
</select>
....
<input type="text" id="autre_pays" style="display:none;" ... />
J'ai bien essayé ce que tu me propose mais ce ne fonctionne pas, j'ai aussi essayé en remplacant display par visibility mais la non plus aucun résultat...
En modifiant la petite erreur de frappe de QuentinC cela fonctionne :
this.options[this.selectedIndex].value=='[#red]A[#black]utre'

Ben oui javascript est sensible à la casse et n'oublie pas de retirer ton code dans les balises javascript qui ne servent plus à rien dans ce cas Smiley cligne

Une question à QuentinC :
this.options.value=='[#red]A[#black]utre'

marche aussi. Cette syntaxe est-elle valide ?
Je n'ai pas betement recopier son bout de code je te rassure, et j'avais bien vue cette petite erreur, mais helas cela ne vient pas de ca Smiley decu
Je crois que le repas m'a decupler mes neurones, je ne sais pas pou quoi mais en fait le display fonctionne Smiley confused , le seul pb c'est que ma zone de texte se trouve juste a gauche du menu select et que lorsque je choisi dans mon menu; ca me rejoute une ligne vide en dessous....


EDIT:je dois etre trop fatigué je croi, car c'est a ne rien y comprendre avec display ca me rajoute une ligne sous mon menu avec ma zone de texe
Modifié par bedomon (22 Feb 2006 - 15:15)
Ouf je vois le bout du tunnel:
voila ce que j'ai fais avec visible (merci gatsu de hfr)
select id="menu" name="menuPays" tabindex="5" onchange="document.getElementById('AutrePays').style.visibility = (this.value == 'autre')? 'visible':'hidden';">	
  				<option value="france" selected="selected">France</option>
				<option value="dom-tom">Dom-Tom</option>
				<option value="belgique">Belgique</option>
				<option value="suisse">Suisse</option>
				<option value="autre" >Autre...</option>
			</select>
		<input type="text" name="autrePays" id="AutrePays" tabindex="6" onkeypress="if (this.value.length>20) this.style.width=this.value.length*0.5+'em'" />
Navré pour la faute de frappe, j'ai tapé le code en live et je n'ai pas relu.

this.options.value : je ne sais pas, je n'ai jamais vu ça nulle part.
Par contre, this.value
peut éventuellement fonctionner, il s'agit de la syntaxe de l'ancienne version, aujourd'hui normallement encore fonctionnelle mais déconseillée au profit de this.options[this.selectedIndex].value
Sujet clos
Aller à