listes liées avec les fonctions hide et show de kquery

[rookieweb]

Bonjour,

J'aimerais créer des listes liées en utilisant les fonctions de hide et show de jquery. Par exemple quand on sélectionne une rubrique seuls les choix de cette rubrique apparaissent et les autres ne seraient alors pas visibles.

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<select name="continent" id="continent">
 <option value="Europe">Europe</option>
 <option value="Afrique">Afrique</option>
 <option value="Asie">Asie</option>
</select>
<select id="payseurope" name="payseurope" style="display:none;">
                                            <option value="fce">France</option>
                                            <option value="esp">Espagne</option>
 </select>
 
<select id="paysafrique" name="paysafrique" style="display:none;">
                                            <option value="mar">Maroc</option>
                                            <option value="nig">Nigéria</option>
 </select>
 
<select id="paysasie" name="paysasie" style="display:none;">
                                            <option value="chi">Chine</option>
                                            <option value="jap">Japon</option>
 </select>

J'avoue ne pas comprendre où intégrer les fonctions hide et show de jquery dans le code et comment récupérer les valeurs...

En vous remerciant pour votre aide.

Seb

[tidus_6_9_2]

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<select name="continent" id="continent"  class="test">
 <option value="Europe">Europe</option>
 <option value="Afrique">Afrique</option>
 <option value="Asie">Asie</option>
</select>
<select id="payseurope" name="payseurope" class="test">
                                            <option value="fce">France</option>
                                            <option value="esp">Espagne</option>
 </select>
 
<select id="paysafrique" name="paysafrique" class="test">
                                            <option value="mar">Maroc</option>
                                            <option value="nig">Nigéria</option>
 </select>
 
<select id="paysasie" name="paysasie" class="test">
                                            <option value="chi">Chine</option>
                                            <option value="jap">Japon</option>
 </select>

Ensuite jquery :

Code :

1
2
3
4
5
6
7
 
$('.test').change(
function(){
     $('.test').hide();
     $(this).show();
}
);

Quelque chose du genre devrais suffire je penses

[eaglesnipe]

Bonjour,

@tidus_6_9_2

Je ne suis pas sûr que cette solution règle le problème (ou tout du moins corresponde à ce qu'il recherche). Je n'ai pas eu le temps de tester mais à première vue, dès qu'il va cliquer sur le premier select (continent), tous les .test vont disparaitre (donc d'après ton code tous les select) et seul celui sur lequel on vient de cliquer va réapparaitre (donc le continent). En soit, on sera toujours dans la meme config : continent visible, les autres combobox cachées.

Je verrai plutot une solution qui se rapprocherait de la tienne, au js près :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<select name="continent" id="continent">
 <option value="Europe">Europe</option>
 <option value="Afrique">Afrique</option>
 <option value="Asie">Asie</option>
</select>
<select id="payseurope" name="payseurope" class="pays">
                                            <option value="fce">France</option>
                                            <option value="esp">Espagne</option>
 </select>
 
<select id="paysafrique" name="paysafrique" class="pays">
                                            <option value="mar">Maroc</option>
                                            <option value="nig">Nigéria</option>
 </select>
 
<select id="paysasie" name="paysasie" class="pays">
                                            <option value="chi">Chine</option>
                                            <option value="jap">Japon</option>
 </select>

Puis le JS :

Code :

1
2
3
var continent = $('#continent option:selected').val();
$('.pays').hide();
$('#pays' + tolowercase(continent)).show();

En supposant qu'il y ait un css qui ressemblerait à ceci :

Code :

1
2
3
.pays {
  display: none;
}

[tidus_6_9_2]

Mia culpa, j'avais mal compris sa demande XD

Oui ton code est plus adapté que le mien, je pensais qu'il voulait tout masquer lorsqu'il sélectionnait une valeur d'un select XD (bon de plus le .click ça fait super moche pour un select, je vais corriger par .change XD)

Cordialement