Une liste déroulante qui dépend d'une autre

helpme -
Phortitou Messages postés 231 Statut Membre - 21 juil. 2009 à 16:49

Bonjour,
Dans mon formulaire, je souhaite avoir une liste déroulante qui dépend du choix fait dans une autre liste d attente en dessus. la première me permet de déterminer la bande 900 ou 1800.
En fonction de cette bande la seconde liste doit m afficher de 850->900 ou 1750->1800.
Et ceci sans renvoyer le formulaire!!!
Voici mon code il est faux :
Merci de bien vouloir me corriger( en php html ou javascipt)

<tr>
<td>Choisissez la bande:</td>
<td><select name="bande" id="bande" >
<option value="basse">900</option>
<option value="haute">1800</option>
</select>
</td>
</tr>
<tr>
<td>Choisissez le BCCH:</td>
<td><select name="BCCH" id="BCCH">
<?php
if ($_POST['bande']= "basse") {
?>
<option value="1" selected="selected" >850</option>
<option value="2">851</option>
<?php
} else if ($_POST['bande']= "haute") {
?>
<option value="3" >1750</option>
<option value="4">1751</option>
<?php
}
?>
</select>
</td>

Afficher la suite

A voir également:

Une liste déroulante qui dépend d'une autre
Liste déroulante excel - Guide
Liste déroulante en cascade - Guide
Liste code ascii - Guide
Site dangereux liste - Guide
Liste déroulante google sheet - Accueil - Guide bureautique

3 réponses

Réponse 1 / 3

jeangilles Messages postés 816 Date d'inscription Statut Membre Dernière intervention 186

En php pure, tu ne peux pas le faire sans passer par le serveur ou précharger deux listes déroulantes

par contre en js, ca doit donner quelquechose comme ca, si j'ai bien compris ce que tu voulais faire (pas testé)

<script type="text/javascript">
function changerBCCH(){
document.getElementById('BCCH').style.display='inline';
var type = document.getElementById('bande').options[document.getElementById('bande').selectedIndex].value;
var valeur;
if(type == 'basse'){
valeur=850;
}else{
valeur=1750;
}
for(i=0;i<50;i++){
document.getElementById('BCCH').options[i]= new Option(valeur+i,valeur+i);
}
}

</script>
<select name="bande" id="bande" onchange="changerBCCH()">
<option value='basse'>900</option>
<option value='haute'>1800</option>
</select>
</select>
<select name="BCCH" id="BCCH" style='display:none' />

Réponse 2 / 3

Zep3k!GnO Messages postés 2049 Statut Membre 200

Une piste : Javascript + événement "onChange" + 2 tableaux pré-rempli par PhP pour remplir le second <select> vis a vis de la valeur du premier....

EnJoY !

Réponse 3 / 3

Phortitou Messages postés 231 Statut Membre 27

Fais avec du Javascript. Tu peux récupérer le valeur du premier choix lorsque la première liste perd le focus. Mais plutôt qu'un long texte, je t'ai fait un petit exemple.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Formulaire</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <script language="javascript">
            function showList() {

                var select = document.getElementById('liste');

                if(select.value == "l1") {
                    document.getElementById('l1').setAttribute('style','visibility:inline');
                } else if(select.value == "l2") {
                    document.getElementById('l2').setAttribute('style','visibility:inline');
                } else {
                    document.getElementById('l3').setAttribute('style','visibility:inline');
                }
            }

       </script>
   </head>
   <body>
       
       <select id="liste" onBlur="javascript:showList();">
       <option value="l1">Liste 1
       <option value="l2">Liste 2
       <option value="l3">Liste 3
       </select>
       
       <select id="l1" style="visibility:hidden">
       <option value="11">Liste 1 Choix 1
       <option value="12">Liste 1 Choix 2
       </select>
       <select id="l2" style="visibility:hidden">
       <option value="21">Liste 2 Choix 1
       <option value="22">Liste 2 Choix 2
       </select>
       <select id="l3" style="visibility:hidden">
       <option value="31">Liste 3 Choix 1
       <option value="32">Liste 3 Choix 2
       </select>
   </body>
</html>

Voila, c'est pas très compliqué en fait, tu joues avec le css en affichant ou non une liste. Une autre méthode, qui est un peu plus compliquée, mais mieux, serait de carrément ajouter un bout de code en Javascript. Là tout mon code est déjà là, mais il est juste invisible. Tu verras par toi-même que ce n'est pas vraiment joli (même s'il y avait une feuille de style).

Essaie de te renseigner sur DOM, dhtml ou encore la méthode innerhtml en Javascript.

Bonne journée,
Phortitou

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Comment classer des noms par ordre alphabétique dans un tableau?

Effacer le contenue d'une cellule avec liste déroulante

Une liste déroulante qui dépend d'une autre

3 réponses

Votre réponse

Discussions similaires

Newsletters