Bonjour,

Je ne sais plus comment faire pour selectionner un div selon l'option selectionnée !

J'ai pas trouvé mon bonheur sur le site.

voici mon select:

<select name="tatc" id="tact" onchange="document.getElementById('tact').style.display=(this.options[this.selectedIndex].value;">       
                    	<option value="4-4-2">4-4-2</option>
                        <option value="4-3-3">4-3-3</option>
                        <option value="4-5-1">4-5-1</option>
                        <option value="3-5-2">3-5-2</option>
                        <option value="4-1-2-1-2">4-1-2-1-2</option>
                	</select>

A l'aide please

Donc si jamais, ceci :

onchange="document.getElementById('tact').style.display=(this.options[this.selectedIndex].value;"

Tu peux le remplace par ceci :

onchange="this.style.display=this.value;"

Sauf que ton code ne va pas donner quelque chose de correct. En gros, tu dis que quand on choisit un des <option> dans la liste de sélection, la propriété CSS "display" de la liste de sélection doit avoir pour valeur l'un des <select>. Pour le choix 1, par exemple, c'est comme si t'avais ceci dans un fichier CSS :
#tact { display: 4-4-2; }

Ben en fait j'ai plusieurs div cachés.
Un avec id 4-4-2, un autre avec id 4-3-3, etc, etc

Ce que je veux, c'est que quand on choisi dans la liste déroulante le 4-4-2 par exemple, le div avec id 4-4-2 s'affiche.

Alors réfléchis, c'est pas dur.

(Ca le devient légèrement plus si tu veux un truc un peu plus élaboré, comme par exemple l'affichage d'un seul DIV en même temps, mais si tu peux déjà faire apparaître simplement un DIV selon le <option> sélectionné, c'est bien.)

Alors j'ai essayé ça, mais là je sature

<select name="tatc" id="tact" onchange="document.getElementById('this.options.selectedIndex.value').style.display='block'">       
                    	<option></option>
                        <option value="4-4-2" id="4-4-2">4-4-2</option>
                        <option value="4-3-3">4-3-3</option>
                        <option value="4-5-1">4-5-1</option>
                        <option value="3-5-2">3-5-2</option>
                        <option value="4-1-2-1-2">4-1-2-1-2</option>
                	</select>

toujours rien

Bien joué, presque ! Le seul truc, c'est que comme le "this.options.selectedIndex.value" est une valeur, tu dois enlever les apostrophes. Et puis utilise "this.value" aussi, plutôt. Ce qui donne :

document.getElementById(this.value).style.display='block'

Et le tour est joué.

Ca ne fonctionne pas, j'ai mis ça.

<select name="tatc" id="tact" onchange="document.getElementById('this.value').style.display='block'">       
                    	<option></option>
                        <option value="4-4-2" id="4-4-2">4-4-2</option>
                        <option value="4-3-3">4-3-3</option>
                        <option value="4-5-1">4-5-1</option>
                        <option value="3-5-2">3-5-2</option>
                        <option value="4-1-2-1-2">4-1-2-1-2</option>
                	</select>

Sans les apostrophes j'ai dit.

Il ne faut pas mettre d'apostrophes autour de this.options[this.selectedIndex].value ... #Grilled...
Et arrêtez de colorer du HTML avec <code type="javascript"> !

<select name="tact" id="tact" onchange="document.getElementById(this.options[this.selectedIndex].value).style.display='block'">      
    <option></option><!-- A quoi sert cette option ? -->
    <option value="4-4-2" id="4-4-2">4-4-2</option>
    <option value="4-3-3">4-3-3</option>
    <option value="4-5-1">4-5-1</option>
    <option value="3-5-2">3-5-2</option>
    <option value="4-1-2-1-2">4-1-2-1-2</option>
</select>

Au passage, les autres divs ne disparaissent pas quand on sélectionne une autre option... Il faudrait une boucle du genre :

var obj = document.getElementById('tact');
for (var i = 0 ; obj.options[i] ; i++)
{
    if (i == obj.selectedIndex)
        document.getElementById(obj.options[obj.selectedIndex].value).style.display = 'block';
    else
        document.getElementById(obj.options[obj.selectedIndex].value).style.display = 'none';
}

Sinon, il y a encore un truc impératif que tu dois savoir : les ID ne commencent jamais par un chiffre. Tu dois obligatoirement mettre une lettre avant. Par exemple 4-4-2 => i4-4-2.

Citation : Nicolas M.

Au passage, les autres divs ne disparaissent pas quand on sélectionne une autre option... Il faudrait une boucle du genre :

var obj = document.getElementById('tact');
for (var i = 0 ; obj.options[i] ; i++)
{
    if (i == obj.selectedIndex)
        document.getElementById(obj.options[obj.selectedIndex].value).style.display = 'block';
    else
        document.getElementById(obj.options[obj.selectedIndex].value).style.display = 'none';
}

C'est très juste, mais il faut créer une fonction, etc. On pourrait aussi faire ceci, qui est plus simple je trouve (bien qu'un peu space, au fond) :

<div>
<select onchange="document.getElementById('affichage').innerHTML = document.getElementById(this.value).innerHTML;">
<option value="i4-4-2">4-4-2</option>
<option value="i4-4-3">4-4-3</option>
<option value="i4-4-4">4-4-4</option>
</select>
</div>
<div id="affichage"></div>
<div id="i4-4-2">Contenu de 4-4-2</div>
<div id="i4-4-3">Contenu de 4-4-3</div>
<div id="i4-4-4">Contenu de 4-4-4</div>

Sachant bien sûr que i4-4-2, i4-4-3, et i4-4-4 sont en display:none par défaut.

Ca ne fonctionne toujours pas ! J'ai mis ça:

<select name="tact" id="tact" onchange="document.getElementById(this.options[this.selectedIndex].value).style.display='block'">       
                    	<option></option>
                        <option value="4-4-2" id="i4-4-2">4-4-2</option>
                        <option value="4-3-3" id="i4-3-3">4-3-3</option>
                        <option value="4-5-1" id="i4-5-1">4-5-1</option>
                        <option value="3-5-2" id="i3-5-2">3-5-2</option>
                        <option value="4-1-2-1-2" id="i4-1-2-1-2">4-1-2-1-2</option>
                	</select>

J'ai cette erreur dans la console d'erreurs firefox:
Erreur : document.getElementById(this.options[this.selectedIndex].value) is null
Fichier Source : http://localhost/usgv/admin.php?page=journal&ecrire=oui
Ligne : 1

Non, c'est <option value="i4-4-2">4-4-2</option> et <div id="i4-4-2">.

Ok, ça fonctionne nickel.
Je n'ai pas eu besoin de mettre i4-4-2, avec 4-4-2 c'est ok, ce qui m'arrange bien.

Mais je n'ai pas tout compris à ton code:

<div>
<select onchange="document.getElementById('affichage').innerHTML = document.getElementById(this.value).innerHTML;">
<option value="i4-4-2">4-4-2</option>
<option value="i4-4-3">4-4-3</option>
<option value="i4-4-4">4-4-4</option>
</select>
</div>
<div id="affichage"></div>
<div id="i4-4-2">Contenu de 4-4-2</div>
<div id="i4-4-3">Contenu de 4-4-3</div>
<div id="i4-4-4">Contenu de 4-4-4</div>

Tu peux me l'expliquer si ce n'est pas trop demander !

Merci

Tu as un <div> contenant un <select> . C'est la liste déroulante où l'utilisateur choisit le bloc à afficher. Ensuite, les <div> qui suivent ont pour ID la valeur de chaque option de la liste. Ces blocs n'apparaîtront jamais, puisque lorsqu'on choisira une option de la liste, le contenu du bloc correspondant sera copié dans le <div id="affichage"> qui, lui, sera toujours apparent

merci