Problème de listes déroulantes liées

deatmead Messages postés 48 Date d'inscription lundi 20 décembre 2004 Statut Membre Dernière intervention 25 octobre 2008 - 9 sept. 2008 à 21:50
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 - 10 sept. 2008 à 14:16
Bonsoir tout le monde,


Déjà j'esper poster dans la bonne section.

Voilà après plusieurs jours de recherche, tuto, messages sur les forums, je n'arrive pas à résoudre mon problème.

J'ai 2 listes déroulantes liées ;
-Pays
--Région

et j'aimerais en ajouter une 3eme qui est liée à Région donc:
--Ville

Petit schéma :
Pays
-Région
--Ville

je penses que c'est bien expliqué.

voici le code que j'utilise :

<head>
<title>TEST</title>
</head>

        <tr>
<td
align="right">PAYS</td><td><select
class="searchTreeLevel1" name="MakeModel[tree][1]" id="MakeModel_1"
onChange="generate_MakeModel_ChildList(1, this.value)">
<option value="0">PAYS</option></select><td>
        </tr>
       
<script language='JavaScript' type="text/javascript">

levels_captions = new Array();

levels_captions[0] = 'PAYS';
levels_captions[1] = 'REGION';
levels_captions[2] = 'VILLE';

tree_depth = 3;

tree_MakeModel = {

0:
        [{"id":11, "caption": 'FRANCE'},            {"id":15,
"caption": 'ITALIE'},            {"id":19, "caption": 'ESPAGNE'}],

11:
    [{"id":12, "caption": 'VAL DOISE'},            {"id":13, "caption":
'PACA'},                    {"id":14, "caption": 'ISERE'}],

15:
    [{"id":16, "caption": 'ITA1'},            {"id":17, "caption":
'ITA2'},                    {"id":18, "caption": 'ITA3'}],

19:        [{"id":20, "caption": 'ESP1'},        {"id":21, "caption": 'ESP2'},                {"id":22, "caption": 'ESP3'}]};

function generate_MakeModel_ChildList(level, value) {

    if (level != tree_depth) {
        list = document.getElementById('MakeModel_' + (level + 1) );
        list.options.length = 0;
        list.options[0] = new Option('' + levels_captions[level], "");
        if (tree_MakeModel[value]) {
            childs = tree_MakeModel[value];
            for (i = 0; i < childs.length; i++)    {
                child = childs[i];
                list.options[i + 1] = new Option(child['caption'], child['id']);
            }
        }
    }
}

generate_MakeModel_ChildList(0, 0);

</script>

        <tr>
<td
align="right">
REGION</td><td><select
class="searchTreeLevel2" name="MakeModel[tree][2]" id="MakeModel_2"
onChange="generate_MakeModel_ChildList(2, this.value)">
<option value="0">REGION</option></select><td>
        </tr>

<tr>
<td
align="right">
VILLE</td><td><select
class="searchTreeLevel3" name="MakeModel[tree][3]" id="MakeModel_3"
onChange="generate_MakeModel_ChildList(3, this.value)">
<option value="0">VILLE</option></select><td>
</tr>

   

</html>       

Si jamais vous pouvez m'aider car je patauges depuis un long moment.

Un grand merci d'avance

9 réponses

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
10 sept. 2008 à 11:36
bonjour,
sujet plus que récurrent....
t'as pas du cherché longtemps....

ch'tiot exemple ici      exemple en pur javascript, pur php, ajax

c'est avec 2 select.... à toi d'adapter à ton besoin....
( ce qui est fait pour le 2ème, "il suffit" de le reproduire pour le 3ème )

CordialementBul[mon Site][M'écrire], <!--
0
deatmead Messages postés 48 Date d'inscription lundi 20 décembre 2004 Statut Membre Dernière intervention 25 octobre 2008
10 sept. 2008 à 11:44
Merci pour ton aide mais j'ai déjà vu pas mal de code différent.
Et je ne parviens pas à faire une 3eme listes liées
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
10 sept. 2008 à 12:08
ah... et que fais tu qui plante ?
CordialementBul[mon Site][M'écrire], <!--
0
deatmead Messages postés 48 Date d'inscription lundi 20 décembre 2004 Statut Membre Dernière intervention 25 octobre 2008
10 sept. 2008 à 12:15
enfaite j'ai repris ton code pour voir si j'y arrivais :
http://marcel-bultez.chez-alice.fr/documents/ADSL/ADSL.php, j'ai commencé par testé avec ton tuto: En pur JavaScript

mais le problème c'est que si je lis la 3eme à la 2eme dans les 2 listes déroulantes j'ai les même données.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
10 sept. 2008 à 12:36
réponse :  comme dans ma réponse au message privé ( inutile ) ,
              et comme dans mon message ci-dessus.
dans le forum, si tu mets ce que tu fais, les intervenants devraient
t'aider à mettre au point.
CordialementBul[mon Site][M'écrire], <!--
0
deatmead Messages postés 48 Date d'inscription lundi 20 décembre 2004 Statut Membre Dernière intervention 25 octobre 2008
10 sept. 2008 à 13:07
voilà j'ai un peu modifié

<HTML>
<HEAD>
<TITLE>TEST</TITLE>

<script type="text/javascript">
function gensel2() { 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>
 
 
 
 <form name="frm">
    <select size=4 name="sel1" id="sel1" onchange="gensel2();">
        <optgroup label="TYPE">
            <option>MOBILE</option>
            <option>GPS</option>
            <option>MP3</option>
        </optgroup>
    </select>

    <select size=4 name="sel2" id="sel2" onchange="gensel2();">
        <optgroup label="MARQUE">
        </optgroup>
    </select>
<script type="text/javascript">
    var s1=document.getElementById("sel1");
    var s2=document.getElementById("sel2");
        var liste=new Array( new Array("SAMSUNG","LG"),
        new Array("TOMTOM","NAVIGO"),
        new Array("IPOD","CREATIVE") );
</script>

    <select size=4 name="sel3" id="sel3">
        <optgroup label="MODELE">
        </optgroup>
    </select>

<script type="text/javascript">
    var s2=document.getElementById("sel2");
    var s3=document.getElementById("sel3");
        var liste=new Array( new Array("aSAMSUNG","aLG"),
        new Array("aTOMTOM","aNAVIGO"),
        new Array("aIPOD","aCREATIVE") );
</script>

</form>

</HTML>
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
10 sept. 2008 à 13:29
si tu fais    <select size=4 name="sel2" id="sel2" onchange="gensel2();">
ça recrée donc le 2ème select en ne tenant compte que du chois dans le select 1 !
appelle une autre fonction (gensel3() ? ) , qui tiendra compte des  sélections
dans le select 1 et dans le select 2 pour créer le select 3

CordialementBul[mon Site][M'écrire], <!--
0
deatmead Messages postés 48 Date d'inscription lundi 20 décembre 2004 Statut Membre Dernière intervention 25 octobre 2008
10 sept. 2008 à 13:53
j'avais déjà essayé et pof rien du tout
0
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
10 sept. 2008 à 14:16
oui... mais ce que tu fais là, ne peut pas résoudre
que tentais tu qui "pof rien du tout" ?
CordialementBul[mon Site][M'écrire], <!--
0
Rejoignez-nous