modifier des <select> dans un formulaire

**Ickou** · 24/04/2007, 15h49

Bonjour à tous

Je ne connais pas du tout javascript (je fais du php, perl et MySQL) et j'aurais besoin d'un petit script pour gerer 2 <select> dans mon formulaire.

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
 
<select name="espece" size="1" >
<option value=0 > All </option> 
<option value=1 > Arabidopsis thaliana </option> 
<option value=6 > Caenorhabditis elegans </option> 
<option value=8 > Canis familiaris </option> 
<option value=12 > Drosophila melanogaster </option> 
<option value=19 > Homo sapiens </option> 
<option value=22 > Mus musculus </option> 
<option value=28 > Rattus norvegicus </option> 
<option value=30 > Saccharomyces cerevisiae </option>
</select>
 
<select name="input_espece" size="1" >
<option value=19 > Homo sapiens </option>
<option value=1 > Arabidopsis thaliana </option>
<option value=6 > Caenorhabditis elegans </option>
<option value=8 > Canis familiaris </option>
<option value=12 > Drosophila melanogaster </option>
<option value=22 > Mus musculus </option>
<option value=28 > Rattus norvegicus </option>
</select>

Je voudrais que le <select> "input_espece" apparaisse uniquement si le <select> "espece" est sur "all". Dans les autres cas, je voudrais que le <select> "input_espece" soit absent ou grisé.
Je ne peux pas réaliser ça en php.

Je vous remercie.

**SpaceFrog** · 24/04/2007, 15h55

sur le onchange du premier:

Code :

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

document.getElementsByName('input_espec')[0].style.display=(this.selectedItem==0)?'block':'none';

**eveilside** · 24/04/2007, 15h59

salut il faut que tu mette un onChange() sur ton premier select qui lance une fonction javascript.

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id="select1">
<select size="1" onChange="tester()">
<option value=0 value="all" > All </option> 
...
....
</select>
 
</div>

ensuite entre <head>et </head>

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
 
 
<script type="text/javascript">
 
function tester()
{
 
 
if (document.getElementById('select1').value=="all")
    document.getElementById('select12).style.visibility="visible";
 
 
}
 
 
</script>

et enfin ton deuxieme select :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="select2" style="visibility: hidden">
<select name="input_espece" size="1" >
<option value=19 > Homo sapiens </option>
<option value=1 > Arabidopsis thaliana </option>
<option value=6 > Caenorhabditis elegans </option>
<option value=8 > Canis familiaris </option>
<option value=12 > Drosophila melanogaster </option>
<option value=22 > Mus musculus </option>
<option value=28 > Rattus norvegicus </option>
</select>
 
</div>

et voila tchao

**Ickou** · 24/04/2007, 18h06

merci beaucoup

, c'est super sympa !

cependant le 2ème select reste toujours invisible maintenant, il doit y avoir une erreur de syntaxe :

dans le HEAD :

Code :

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

1
2
3
4
5
6
7
8
 
    <script type="text/javascript">
    function tester()
    {
    if (document.getElementById('select1').value=="0")
        document.getElementById('select2').style.visibility="visible";
    }
    </script>

le premier select :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="select1" class="form_champ"><select name="espece" size="1" onChange="tester()" >
<option value=0 > All </option> 
<option value=1 > Arabidopsis thaliana </option> 
<option value=6 > Caenorhabditis elegans </option> 
<option value=8 > Canis familiaris </option> 
<option value=12 > Drosophila melanogaster </option> 
<option value=19 > Homo sapiens </option> 
<option value=22 > Mus musculus </option> 
<option value=28 > Rattus norvegicus </option> 
<option value=30 > Saccharomyces cerevisiae </option>
</select> </div>

le 2ème select :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="select2" style="visibility: hidden" class="form_champ">
<select name="input_espece" size="1" >
<option value=19 > Homo sapiens </option>
<option value=1 > Arabidopsis thaliana </option>
<option value=6 > Caenorhabditis elegans </option>
<option value=8 > Canis familiaris </option>
<option value=12 > Drosophila melanogaster </option>
<option value=22 > Mus musculus </option>
<option value=28 > Rattus norvegicus </option>
</select></div>

Je vous remercie d'avance

**SpaceFrog** · 24/04/2007, 19h20

selectedItem ... pas value ...

en onchange pas onChange ...

**Ickou** · 25/04/2007, 11h33

je n'arrive pas à entrer dans ma boucle if :

Code :

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

1
2
3
4
5
6
 
      if (document.getElementById('select1').value==" All ")
      {
          document.getElementById('select2').style.visibility="visible";
          window.document.write('Hello World');
      }

J'ai testé plein de syntaxes différentes pour le "if" mais en vain

**Ickou** · 25/04/2007, 13h48

Yalla ! j'ai trouvé !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function tester()
    {
     if(document.forms['roxane'].elements['espece'].value==0)
     {
      document.getElementById('select2').style.visibility="visible";
     }
     else
     {
      document.getElementById('select2').style.visibility="hidden";
     }
    }