Discussion :

[argon]

Bonjour tout le monde

Je souhaiterais que le select appart s'affiche quand Appartement de select logement est selectionné.

Voici les codes


style:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<style type="text/css">
select.hide { 
visibility:hidden;
display:none;
}
select.show {
visibility:visible;
display:;
}
 
</style>

Le select logement:

Code :

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

1
2
3
4
5
6
7
8
9
 
<SELECT name="logement" id="btnRecherche" onchange="document.getElementById('cbb1').className='show'">
 
<option style="background-color:yellow">-Type de logement-</option>
 
<option style="background-color:yellow">Maison</option>
 
<option style="background-color:yellow">Appartement</option>
</SELECT>

Quand on selectionne Appart du combo logement, le combo appart dois s'afficher.

Code :

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

1
2
3
4
5
6
 
<SELECT  id="cbb1" name="appart" class="hide">
 
<option style="background-color:yellow">-type appart-</option>
<option style="background-color:yellow">t1</option>
</SELECT>

Je ne vois pas comment réaliser la fonction.

Merci

A +

[gwinyam]

Ouah tu te casses la tête là.

Ton premier SELECT, celui qui fera apparaitre l'autre:

Code html :

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

1
2
3
<select name="liste1" id="liste1" onchange="afficher();">
    <option>[...]</option>
</select>

Le second:

Code html :

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

1
2
3
<select name="liste2" id="liste2" style="display: none;">
    <option>[...]</option>
</select>

Le code javascript relié à ton premier SELECT:

Code javascript :

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

1
2
3
4
5
6
7
function afficher() {
    if(document.getElementById("liste1").value = 1) {
        document.getElementById("liste1").display = '';
    } else {
        document.getElementById("liste1").display = 'none';
    }
}

ça devrait le faire

[E.Bzz]

Bonjour,
c'est comme tu l'as fais côté JS :

Code :

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

<SELECT name="logement" id="btnRecherche" onchange="document.getElementById('cbb1').className='show'">

Mais pour le CSS :

Code :

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

1
2
3
4
select.show {
visibility:visible;
display:block;
}

Tu n'as pas besoin des styles visibility ET display : choisis un des 2

A+

[E.Bzz]

Ouah tu te casses la tête là.

Pas vraiment : c'était presque bon

A+

[gwinyam]

Ouais c'est presque pareil, si on chipote à la ligne de code

[E.Bzz]

Ouais c'est presque pareil, si on chipote à la ligne de code

A propos de chipotter

Code :

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

document.getElementById("liste1").style.display = 'none';

Et sinon, les value sont toujours de type caractère et non numérique (comme dans ton exemple) ...

A+

[gwinyam]

Ah ouais pas faux. Erreur de jeunesse

[argon]

Bonjour tout le monde

Je repete, il y a deux options appartement et maison.

Je souhaite que le deuxieme select s'affiche que on choisi appartement pas maison.

Avez vous compris?

Merci

A +

[E.Bzz]

Je souhaite que le deuxieme select s'affiche que on choisi appartement pas maison.

Avez vous compris?

Pas sûr, vu le caractère approximatif de cette ... phrase

[gwinyam]

Je t'ai fourni un modèle de fonctionnement. A partir de cela tu as juste à changer la condition dans la fonction javascript pour que cela fonctionne.

La solution de E.Bzz respecte le plus l'idée que tu avais au départ, tu as juste à introduire une condition pour que cela affiche la deuxième si l'on sélectionne seulement l'un des deux.

Si c'est pas ça que t'attendais ta question, se référer à :

Pas sûr, vu le caractère approximatif de cette ... phrase

[argon]

Bonjour tout le monde

Voici ce que j'ai fais.

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" LANGUAGE="javaScript">
 
 
function afficher() {
    if(document.getElementById("logement").value = "Appartement") {
        document.getElementById("logement").display = '';
    } else {
        document.getElementById("logement").display = 'none';
    }
}
 
 
 
</script>

Code :

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

1
2
3
4
5
6
 
<style type="text/css">
select.show {
visibility:visible;
display:block;
}

Rien ne s'affiche.

Pourquoi?


A +

[Jumano]

Bonjour,
1 - Tu dois mettre "==" à la place de "=" quant tu veux savoir si la valeur de ton "select" 'logement' est égale à "Appartement",
2 - Dans ta fonction tu essayes de modifier le "select" ayant l'id "logement" et non celui ayant l'id "cbb1",
3 - Si tu veux modifier le style il faut utiliser "className" (comme tu l'avais fait au départ),
Ce qui donne :

Code :

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

1
2
3
4
5
6
7
8
9
<SCRIPT type="text/javascript" LANGUAGE="javaScript">
function afficher() {
    if(document.getElementById("logement").value == "Appartement") {
        document.getElementById("cbb1").className = "show";
    } else {
        document.getElementById("cbb1").className = "hide";
    }
}
</script>

Ensuite rajoute des "value" aux options de tes "selects", comme ceci :

Code :

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

1
2
3
4
5
<SELECT name="logement" id="btnRecherche" onchange="afficher()">
<option style="background-color:yellow" value="Type">-Type de logement-</option>
<option style="background-color:yellow" value="Maison">Maison</option>
<option style="background-color:yellow" value="Appartement">Appartement</option>
</SELECT>

[argon]

Rebonjour

Désolé, je suis perdu, le combo ne s'affiche, je pense que le probléme vient du style.

Voici actuellement les codes.

Code :

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

1
2
3
4
5
6
7
8
9
 
<SELECT name="logement" id="logement" onchange="afficher();">
 
<option style="background-color:yellow">-Type de logement-</option>
 
<option style="background-color:yellow" value="Maison">Maison</option>
 
<option style="background-color:yellow" value="Appartement" >Appartement</option>
</SELECT>

Code :

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

1
2
3
4
5
 
<select id="appart" name="appart" class="hide">
 
<option style="background-color:yellow">-type appart-</option>
<option style="background-color:yellow" value="t1">t1</option>

style

Code :

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

1
2
3
4
5
6
7
8
 
 
<style type="text/css">
 
select.show {
visibility:visible;
display:;
}

Merci

A +

[Jumano]

Il faudrait voir à ne pas modifier sans cesse les informations de tes selects:
Tu indiques une première fois l'id "cbb1" et maintenant tu indiques une autre id "appart".
Vérifie bien dans ta fonction que tu désires modifier la "className" de l'élément ayant l'id "appart" ...