affichage d'un combo suite à la selection d'un option d'un autre combo.

Bonjour tout le monde

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

Voici les codes


style:

Code:

---

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:

---

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:

---

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 +

Ouah tu te casses la tête là.

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

Code:

---

1 2 3

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

---

Le second:

Code:

---

1 2 3

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

---

Le code javascript relié à ton premier SELECT:

Code:

---

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;)

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

Code:

---

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

---

Mais pour le CSS :

Code:

---

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+

Citation:

---

Envoyé par gwinyam

Ouah tu te casses la tête là.

---

Pas vraiment : c'était presque bon :mrgreen:

A+

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

Citation:

---

Envoyé par gwinyam

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

---

A propos de chipotter

Code:

---

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+

Ah ouais pas faux. Erreur de jeunesse:mouarf:

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 +

Citation:

---

Envoyé par argon

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

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

Citation:

---

Envoyé par E.Bzz

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

---

Bonjour tout le monde

Voici ce que j'ai fais.

Code:

---

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:

---

1 2 3 4 5 6

<style type="text/css"> select.show { visibility:visible; display:block; }

---

Rien ne s'affiche.

Pourquoi?


A +

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:

---

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:

---

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>

---

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:

---

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:

---

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:

---

1 2 3 4 5 6 7 8

<style type="text/css">   select.show { visibility:visible; display:; }

---

Merci

A +

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" ...