IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

JavaScript select onChange - div


Sujet :

JavaScript

Vue hybride

haNjo JavaScript select onChange -... 23/07/2011, 14h04
Invité salut, quasi good : ... 23/07/2011, 14h12
haNjo Parfait, un grand merci :) 23/07/2011, 14h19
haNjo Bonjour, J'ai une question... 24/07/2011, 11h39
Invité non, il suffit que tu... 24/07/2011, 14h03
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Décembre 2010
    Messages : 31
    Par défaut JavaScript select onChange - div
    Bonjour,

    J'ai déjà parcouru pas mal de thread, mais une interrogation subsiste pour moi dans mon code. Je ne suis pas un habitué du js

    Voici mon objectif (très simple):
    J'ai un bouton select, en fonction du choix j'affiche un div ou un autre sans valider quoi que ce soit -> je sélectionne, ça s'affiche.

    Voici mon code:
    Javascript:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <script type="text/javascript">
    	function changementType() {
    		var ville = document.getElementById("ville").value;
    		if (ville == "mons")	{
    		document.getElementById("infoMons").style="display:block";
    		document.getElementById("infoBinche").style="display:none";
    		} 
    		else {
    		document.getElementById("infoMons").style="display:none";
    		document.getElementById("infoBinche").style="display:block";
    		}
    </script>
    Et le select ainsi que les en-têtes des div:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <select name="ville" id="ville" onchange="changementType();">
    	<option value="mons">Mons</option>
    	<option value="binche">Binche</option>
    </select>
    <div id="infoMons" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;"></div>
     
    <div id="infoBinche" style=" margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;"></div>
    J'ai l'impression que mon code n'a aucun effet.

    Est-ce que j'utilise mal le script js ou mon code est totalement erroné?

    Merci de votre attention.

    hNj

  2. #2
    Invité
    Invité(e)
    Par défaut
    salut,

    quasi good :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("infoMons").style.display="block";
    tu as également oublié de fermer une accolade pour ta fonction changementType.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Décembre 2010
    Messages : 31
    Par défaut
    Parfait, un grand merci

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Décembre 2010
    Messages : 31
    Par défaut
    Bonjour,

    J'ai une question vis-à-vis du même style de script. J'ai modifié mon script pour qu'il puisse afficher ou cacher des div via des liens. J'aimerai maintenant que ce script permette de cacher le div afficher lorsque je clique sur un autre lien. Donc qu'on ne puisse avoir qu'un seul div affiché à la fois.

    Voici mon script js:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <script type="text/javascript">
    	function visibilite(thingId) { 
    		var targetElement; 
    		targetElement = document.getElementById(thingId) ; 
    		if (targetElement.style.display == "none") 	{ 
    			targetElement.style.display = "" ; 	} 
    		else { 
    			targetElement.style.display = "none" ; } 
    	}
    		</script>
    Et mes div + boutons
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <a id="nom" value="monsInfo" href="javascript:visibilite('infoMons');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Contact</a>
    <div id="infoMons" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display: none;"></div>
     
    <a id="nom" value="monsHoraire" href="javascript:visibilite('horaireMons');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Horaire</a>
    <div id="horaireMons" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display: none;"></div>
     
    <a id="nom" value="bincheInfo" href="javascript:visibilite('infoBinche');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Contact</a>
    <div id="infoBinche" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;"></div>
     
    <a id="nom" value="bincheHoraire" href="javascript:visibilite('horaireBinche');" style="margin-top: 10px; font-size: 0.9em; margin-left: 20px">Horaire</a>
    <div id="horaireBinche" style=" margin-top: 10px; font-size: 0.9em; margin-left: 20px; display:none;">
    Faut-il beaucoup modifier?

    Merci!

  5. #5
    Invité
    Invité(e)
    Par défaut
    non,

    il suffit que tu caches tous les div (sauf celui que tu veux afficher éventuellement), et après tu affiches celui que tu veux afficher.

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2010
    Messages
    31
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Décembre 2010
    Messages : 31
    Par défaut
    Citation Envoyé par galerien69 Voir le message
    non,

    il suffit que tu caches tous les div (sauf celui que tu veux afficher éventuellement), et après tu affiches celui que tu veux afficher.
    Ils sont tous "hidden", mais lorsque j'ouvre par exemple le div "monsInfo", et que par après j'ouvre le div "monsHoraire", j'aimerai que le div "monsInfo" se referme automatiquement.

    Y a-t-il quelque chose à modifier?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. QuikForm Javascript Select OnChange
    Par marty499 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 21/05/2009, 09h30
  2. [AJAX] Ajax, formulaire, div et select
    Par n8ken dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 23/09/2006, 10h51
  3. [Javascript] Select à plusieurs colonne
    Par stailer dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 10/03/2006, 22h15
  4. [Javascript] Rafraichir un div...
    Par Empty_body dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 28/02/2006, 16h13
  5. code javascript dans onchange d'un <select>
    Par grochenel dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 28/11/2005, 20h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo