Valeur par défaut dans la seconde liste de 2 listes liées

**orus8** · 07/06/2007, 11h50

Bonjour à tous,

Voici mon problème. J'ai deux listes liées qui pour un région (sel1)
affiche les départements de celle-ce (sel2). La seconde liste est crée
à l'aide d'une fonction Javascript (gensel2).

Je souhaite par exemple que la région "Centre" soit sélectionnée par
défaut, j'ai donc mis "selected" dans la liste sel1 et cela
fonctionne. Le problème est qu'au premier affichage, les départements
de la région "Centre" ne sont pas affichés (c'est sûrement du à la
fonction qui n'est appelée qu'à l'évèneùent onchange()). J'aimerai
d'ailleurs que le département "Indre" soit sélectionné. J'ai donc
tenté le "document.frm.sel2.selectedIndex = 2;" mais cela ne
fonctionne pas...

Comment puis-je faire ? Pouvez-vous m'aider ?

Voici un exemple de code que j'utilise. Merci par avance pour votre
aide précieuse.

Aurélien

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<HTML> 
<HEAD> 
<TITLE>2 Selects dépendants en JavaScript</TITLE> 
 
<script type="text/javascript"> 
function gensel2(nom_formulaire) {
 
        var s1 = document.forms[nom_formulaire].sel1; 
        var s2 = document.forms[nom_formulaire].sel2; 
        s2.length = 0;
 
        for(var n=0; n < liste[s1.selectedIndex].length; n++) { 
                s2.length++; 
                s2.options[s2.length-1].text = liste[s1.selectedIndex][n]; 
        }
}
 
</script> 
</HEAD> 
 
<BODY> 
<form name="frm"> 
        <select name="sel1" id="sel1" onChange="gensel2('frm');"> 
                <optgroup label="Régions"> 
                        <option>Bretagne</option> 
                        <option selected>Centre</option> 
                        <option>Nord-Pas-de-Calais</option> 
                </optgroup> 
        </select>
 
        <select name="sel2" id="sel2"> 
                <optgroup label="Départements"></optgroup> 
        </select> 
</form>
 
<script type="text/javascript"> 
 
var liste =       new Array(  new Array("Côtes-d'Armor","Finistère","Ille-et-Vilaine","Morbihan"), 
                  new Array("Cher","Eure-et-Loire","Indre","Indre-et-Loire","Loir- 
et-Cher","Loiret"), 
                  new Array("Nord","Pas-de-Calais"));
 
document.frm.sel2.selectedIndex = 2; 
</script> 
</BODY> 
</HTML>

**nos80** · 07/06/2007, 13h59

Essaie comme ça :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<HTML> 
<HEAD> 
<TITLE>2 Selects dépendants en JavaScript</TITLE> 
 
<script type="text/javascript">
 
var liste =       new Array(new Array("Côtes-d'Armor","Finistère","Ille-et-Vilaine","Morbihan"), 
                  new Array("Cher","Eure-et-Loire","Indre","Indre-et-Loire","Loir-et-Cher","Loiret"),
                  new Array("Nord","Pas-de-Calais"));
 
function gensel2(nom_formulaire) {
        var s1 = document.forms[nom_formulaire].sel1; 
        var s2 = document.forms[nom_formulaire].sel2; 
        s2.length = 0;
 
        for(var n=0; n < liste[s1.selectedIndex].length; n++) { 
                s2.length++; 
                s2.options[s2.length-1].text = liste[s1.selectedIndex][n]; 
        }
}
 
</script> 
</HEAD> 
 
<BODY> 
<form name="frm"> 
        <select name="sel1" id="sel1" onChange="gensel2('frm');"> 
                <optgroup label="Régions"> 
                        <option>Bretagne</option> 
                        <option selected>Centre</option> 
                        <option>Nord-Pas-de-Calais</option> 
                </optgroup> 
        </select>
 
        <select name="sel2" id="sel2"> 
                <optgroup label="Départements"></optgroup> 
        </select> 
</form>
 
<script type="text/javascript"> 
  gensel2('frm');
  document.frm.sel2.options[1].selected = true;
</script> 
 
</BODY> 
</HTML>

**orus8** · 07/06/2007, 14h11

Merci !!!

Par contre il faut inverser les deux lignes pour que ça fonctionne car sinon les valeurs de la liste s'affichent mais aucun élément n'est sélectionne.

Code :

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

1
2
3
4
<script type="text/javascript"> 
  gensel2('frm');
  document.frm.sel2.selectedIndex = 2;
</script>

Valeur par défaut dans la seconde liste de 2 listes liées

JavaScript

Discussions similaires

Partager

Partager