Afficher un div lors d'une sélection

**Emotion** · 13/10/2007, 16h55

Bonjour

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

J'ai la portion de code ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**th0mas** · 13/10/2007, 17h47

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>

**Emotion** · 13/10/2007, 18h03

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...

**th0mas** · 13/10/2007, 18h45

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>

**th0mas** · 13/10/2007, 19h14

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>

Invité · 13/10/2007, 21h05

Il y a plus simple :

Modif HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

JavaScript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**Emotion** · 13/10/2007, 21h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**th0mas** · 14/10/2007, 10h50

Invité · 14/10/2007, 11h36

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.

Invité · 14/10/2007, 11h52

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

Ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code complet testé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Emotion** · 14/10/2007, 14h39

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

**d-Rek** · 14/10/2007, 17h33

Pense à cliquer sur

Bonne continuation

Afficher un div lors d'une sélection

JavaScript

Discussions similaires

Partager

Partager