Afficher un div lors d'une sélection

Version imprimable

Bonjour :)

J'aurais besoin d'une petite aide en création javascript :

J'ai la portion de code ci-dessous :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <form method="post" action="test.php" name="envoyer_form"> <select name="select_mat"> <option value="1">Value = 1</option> <option value="autre">Autre...</option> </select> <div id="choisir" style="display:none"> <input type="text" id="input_connexion" name="saisir_choisir" /> </div> </form>
Et je cherche à faire en sorte que lorsque l'option "autre" est sélectionnée, le div à l'id "choisir" devienne visible...

Pourriez-vous me fournir ce petit coup de main ?

Merci d'avance ;)

13/10/2007, 17h47
th0mas

Cela devrait t' aider a écrire ta fonction ;)

<select name="select_mat" onchange="alert(this.options[this.selectedIndex].value)">
<option value="1">Value = 1</option>
<option value="autre">Autre...</option>
</select>
13/10/2007, 18h03
Emotion

Pas du tout... A vrai dire je n'y connais pas grand chose en javascript ;) Quand j'aurai le temps, je me suis déjà promi de m'y de plein pied. Pour l'instant je ramerais à essayer d'écrire cette fontion...
13/10/2007, 18h45
th0mas

Voyons voyons une petite prise de tête de 30 minutes c' est pas la mer à boire ^^ :
Perso j' ai pas le temps de te coder toute la fonction et php étant plus ma tasse de thé mais ca donnerait quelquechose comme ca algorithement parlant:

function show(id)
{
var array_div = array('div1','div2','div3','div4); //tableau contenant tous les id de tes div
for(x=0;x<=array_div.length;x++)
{
if(array_div[x]==id)
document.getElementById(id).visible='visible';
else
document.getElementById(id).visible='hidden';
}
}

<select name="select_mat" onchange="show(this.options[this.selectedIndex].value)">
<option value="div1">Value = 1</option>
<option value="div2">Autre...</option>
<option value="div3">Autre...</option>
<option value="div4">Autre...</option>
</select>
13/10/2007, 19h14
th0mas

j' ai profité de la pause clope de mon collègue pour te rédiger ta fonction ;)

<html>
<head>
<script language='Javascript'>
function show(id)
{
var array_div = new Array('div1','div2','div3','div4'); //tableau contenant tous les id de tes div
for(x=0;x<array_div.length;x++)
{

document.getElementById(array_div[x]).style.visibility='hidden';
}
document.getElementById(id).style.visibility='visible';
}
</script>
</head>
<body>

<select name="select_mat" onchange="show(this.options[this.selectedIndex].value)">
<option value="div1">Value = 1</option>
<option value="div2">Autre...</option>
<option value="div3">Autre...</option>
<option value="div4">Autre...</option>

</select>
<div id='div1'>div1</div>
<div id='div2'>div2</div>
<div id='div3'>div3</div>
<div id='div4'>div4</div>
</body>
</html>

Il y a plus simple :

Modif HTML

Code:

<select name="select_mat" onchange="javascript:afficherDiv(this)">

JavaScript

Code:

1
2
3
4
5
6
7
8
9
function afficherDiv(menuSelect) {
    var div = document.getElementById("choisir");
    if (menuSelect.selectedIndex.value == "autre") {
          div.style.display = "block";
    }
    else {
          div.style.display = "none";
    }
}

Enfin, un truc du genre! ;)

Merci à tous les deux ;)

J'ai pris ton script webrider, mais il ne fonctionne pas... Je n'arrive pourtant pas à comprendre l'origine du problème, peut-être la synthaxe.

Voici le code complet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<script type="text/javascript" language="JavaScript">
function afficherDiv(menuSelect) {
    if (menuSelect.selectedIndex.value == "autre") {
          document.getElementById("choisir").style.display = "block";
    }
    else {
          document.getElementById("choisir").style.display = "none";
    }
}
</script>
 
<form method="post" action="test.php" name="envoyer_form">
 
<select name="select_mat" onchange="javascript:afficherDiv(this)">
<option value="1">Value = 1</option>
<option value="autre">Autre...</option>
</select>
 
<div id="choisir" style="display:none">
texte ....
</div>
 
</form>

14/10/2007, 10h50
th0mas

:calim2:
14/10/2007, 11h36
Invité

Je ne sais pas si tu écris ce code tel quel mais tu dois déclarer le script dans le <head> et le form dans le <body> de ta page. C'est peut-être ça qui te pose problème.

J'ai fait le test et effectivement j'ai fait une erreur dans le code

Ligne

Code:

if (menuSelect.selectedIndex.value == "autre") {

Il ne doit pas y avoir de selectedIndex ce qui donne :

Code:

if (menuSelect.value == "autre") {

Code complet testé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<head>
<script type="text/javascript">
function afficherDiv(menuSelect) {
    if (menuSelect.value == "autre") {
          document.getElementById("choisir").style.display = "block";
    }
    else {
          document.getElementById("choisir").style.display = "none";
    }
}
</script>
</head>
<body>
<form method="post" action="test.php" name="envoyer_form">
 
<select name="select_mat" onchange="javascript:afficherDiv(this)">
<option value="1">Value = 1</option>
<option value="autre">Autre...</option>
</select>
 
<div id="choisir" style="display:none">
texte ....
</div>
 
</form>
</body>

14/10/2007, 14h39
Emotion

Merci beaucoup, cette fois c'est parfait ;)

th0mas > J'ai appris de nouvelles choses en comprenant ton script, mais il était un peu poussé pour ce que je voulais faire : je ne voulais afficher un div que lorsque la dernière option était sélectionnée, et non un div différent pour chaque option ;)
14/10/2007, 17h33
d-Rek

Pense à cliquer sur :resolu: ;)
Bonne continuation