modifier des <select> dans un formulaire

Version imprimable

Bonjour à tous :D

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:

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

24/04/2007, 15h55
SpaceFrog

sur le onchange du premier:

Code:

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

salut

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

Code:

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:

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:

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 :D

merci beaucoup :king: , 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:

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:

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:

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

24/04/2007, 19h20
SpaceFrog

selectedItem ... pas value ...

en onchange pas onChange ...

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

Code:

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 :cry:

Yalla ! j'ai trouvé !

Code:

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";
     }
    }

25/04/2007, 14h05
SpaceFrog

Heureusement que j'avais précisé "pas value":

Code:

if(this.options.selectedIndex==0)