Sujet Précédent Sujet Suivant

Listes déroulantes

Fermé
Slider8 Messages postés 3 Date d'inscription dimanche 17 mars 2013 Statut Membre Dernière intervention 21 mars 2013 - Modifié par Slider8 le 17/03/2013 à 19:13
charcom Messages postés 61 Date d'inscription jeudi 24 janvier 2013 Statut Membre Dernière intervention 3 novembre 2022 - 21 mars 2013 à 17:42
Bonjour,

J'ai trouvé sur internet un script qui permet de faire des "listes déroulantes liées".
Simplement, dans cet exemple, c'est limité à deux listes.
Je souhaiterais avoir des listes liées dynamiques (ou pas, selon ce qui est possible de faire), c'est-à-dire que je puisse avoir un coup trois listes et une autre fois quatre, par exemple. Enfin, il faut que la dernière liste puisse renvoyer vers des pages (via les choix qui l'a compose).

J'aimerais évité le PHP, ou autres scripts avancés. Je me limite au HTML/CSS et Javascript.

Je ne suis pas allergique au code, je viens de me mettre à jour HTML5 et CSS3, mais je n'ai pas encore de réel compétence en javascript (qui semble nécessaire pour ce que je demande, en-dehors des autres scripts). Celui que j'ai trouvé est vraiment trop complexe pour que je puisse l'amélioré dans le sens voulu.
J'ai quand même tenté de bouger quelques lignes ou éléments, mais rien.

"Marque" et "modèle" ont été ajouté de manière "bête".

Voici le code : 

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=UTF-8" /> 
<title>Test_listes</title> 
<SCRIPT language="JavaScript"> 
<!-- 
<!-- 
function Choix(form) { 
i = form.produits.selectedIndex; 
form.profil.options.length=0; 
Item = new Option("Choisissez un profil", "", false, false); 
form.profil.options[0]=Item; 
form.profil.selectedIndex = 0; 
switch (i) { 
case 1 :  
var txt = new Array ('Autonomie importante','Grand écran','Récent'); 
var url = new Array ('1_1.html','1_2.html','1_3.html'); 
break; 
case 2 :  
var txt = new Array ('Portable','Tour','Tour-écran'); 
var url = new Array ('2_1.html','2_2.html','2_3.html'); 
break; 
} 

for (i=0;i<txt.length;i++) { 
  Item = new Option(txt[i], url[i], false, false); 
  form.profil.options[i+1]=Item; 
  } 
} 
// --> 

function MM_jumpMenu(targ,selObj,restore){ //v3.0 
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); 
  if (restore) selObj.selectedIndex=0; 
} 
//--> 
</SCRIPT> 
</head> 
<body> 
<FORM> 
   <p> 
     <SELECT NAME="produits" onChange='Choix(this.form)'> 
           <OPTION>Catégories de produits</OPTION> 
           <OPTION>Téléphones</OPTION> 
           <OPTION>Ordinateurs</OPTION> 
     </SELECT> 
   
   <SELECT NAME="profil" onChange="MM_jumpMenu('parent',this,0)"> 
          <OPTION>Choisissez un profil</OPTION> 
     </SELECT> 
    
   <SELECT NAME="marque" onChange=""> 
          <OPTION>Choisissez une marque</OPTION> 
     </SELECT> 
    
  <SELECT NAME="modele" onChange=""> 
          <OPTION>Choisissez un modèle</OPTION> 
     </SELECT> 
  </p> 
</FORM>  
</body> 
</html>


Merci d'avance pour votre aide.

3 réponses

Réponse 1 / 3
margul
17 mars 2013 à 20:43
Bonjour,

Je souhaiterais avoir des listes liées dynamiques (ou pas, selon ce qui est possible de faire)

Si vous voulez un site dynamique il faut utiliser une base de données et PHP(ou autre langage serveur, mais php est adapté et gratuit).
En effet javascript s'exécute sur l'ordinateur de l'internaute donc tout ce qui se fera avec javascript doit se faire avec les données chargées par la page.

Ce qui réponds exactement à votre question c'est AJAX: Asynchronous Javascript And Xml qui utilise du javascript et des données extérieures(métadonnées) en XML qui seront bien sûr envoyé par le serveur(PHP) ou par tout autre moyen nécessaire.
Le fait d'avoir des métadonnées permet de ne plus recharger d'informations pour jongler avec les listes car leur contenu sera stocké par xml(comme une base de données temporaire mais qui doit recevoir des informations de plus haut).

Donc la réponse n'est pas dans le script mais dans les moyens que vous employez. Faire 4 listes dynamique liée est quand même assez complexe techniquement.
0
Slider8 Messages postés 3 Date d'inscription dimanche 17 mars 2013 Statut Membre Dernière intervention 21 mars 2013
17 mars 2013 à 21:36
Oui. J'ai bien compris que lorsque que l'on veut du dynamisme, PHP n'est pas très loin.
Mais pour le moment, je n'ai pas les compétences nécessaire.

Dites-vous que, pour faire ce que je demande (sans forcément faire du dynamisme, en tout cas, pas plus que ce qui est écrit plus haut), il faut impérativement passer par du PHP ?

Je préfère avoir quelque chose qui ressemble au code que j'ai posté, qui fonctionne, mais seulement pour deux listes. Il me faut juste quatre liste si c'est possible.
0
Réponse 2 / 3
Slider8 Messages postés 3 Date d'inscription dimanche 17 mars 2013 Statut Membre Dernière intervention 21 mars 2013
Modifié par Slider8 le 21/03/2013 à 11:54
J'apporte du nouveau.
J'ai trouvé une piste intéressante.
Il n'y a pas de liens sur la dernière liste : c'est un message d'alerte qui s'affiche.

Est-ce que quelqu'un a une idée de comment remplacer cela par des liens ?
Je choisis dans la troisième listes une des options qui sont proposées, bam ça m'ouvre un lien ?

Du coup, je ne vois pas comment utiliser <optgroup> dans tout ce code puisque ça passe par le javascript !

Le code : 

<!DOCTYPE html> 
    <html> 
        <head> 
            <meta charset="UTF-8" /> 
            <title>Liste sans btn en JS avec lien sur la troisème liste</title> 
             
            <script type="text/javascript"> 

            var categories = []; 
            categories["startList"] = ["Wearing Apparel","Books"] 
            categories["Wearing Apparel"] = ["Men","Women","Children"]; 
            categories["Books"] = ["Biography","Fiction","Nonfiction"]; 
            categories["Men"] = ["Shirts","Ties","Belts","Hats"]; 
            categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"]; 
            categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"]; 
            categories["Biography"] = ["Contemporay","Historical","Other"]; 
            categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"]; 
            categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"]; 

var nLists = 3; // number of select lists in the set 

function fillSelect(currCat,currList){ 
var step = Number(currList.name.replace(/\D/g,"")); 
for (i=step; i<nLists+1; i++) { 
document.forms['tripleplay']['List'+i].length = 1; 
document.forms['tripleplay']['List'+i].selectedIndex = 0; 
} 
var nCat = categories[currCat]; 
for (each in nCat) { 
var nOption = document.createElement('option');  
var nData = document.createTextNode(nCat[each]);  
nOption.setAttribute('value',nCat[each]);  
nOption.appendChild(nData);  
currList.appendChild(nOption);  
}  
} 

function getValue(L3, L2, L1) { 
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3); 
} 

function init() { 
fillSelect('startList',document.forms['tripleplay']['List1']) 
} 

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);  

</script>  
        </head> 
        <body> 
            <form name="tripleplay" action=""> 
                <select name='List1' onchange="fillSelect(this.value,this.form['List2'])"> 
                    <option selected>Make a selection</option> 
                </select> 

                <select name='List2' onchange="fillSelect(this.value,this.form['List3'])"> 
                    <option selected>Make a selection</option> 
                </select> 
                 
                <select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)"> 
                    <option selected >Make a selection</option> 
                </select> 
            </form> 
        </body>   
    </html>
0
Réponse 3 / 3
charcom Messages postés 61 Date d'inscription jeudi 24 janvier 2013 Statut Membre Dernière intervention 3 novembre 2022 5
Modifié par charcom le 21/03/2013 à 17:44
Bonjour Slider8,

En transformant tes listes en "liens", cela te permettra effectivement de traiter les données et éventuellement les conserver (je pense que c'est dans la récupération de tes données que PHP est nécessaire).

Voici un code qui transformera tes menus déroulants en liens :

Tu mets ceci entre <head> et </head> : 

      <script language="JavaScript"> 
      function ChangeUrl(formulaire) 
      { if (formulaire.valider.selectedIndex != 0) 
      { window.self.location.href = formulaire.valider.options[formulaire.valider.selectedIndex].value; } } 
      </script>


puis en lieu et place de ton menu déroulant : 

<form> 
      <select name="valider" size=1 onChange="ChangeUrl(this.form)"> 
      <option selected>Faire un choix</option> 
      <option value="page1.php">option 1</option> 
      <option value="page2.php">option 2</option> 
      </select> 
      </form>


Bien sûr, tu mets les liens corrects dans Value et les bons intitulés à la place de option 1, option 2, etc.
0

Discussions similaires

additionner deux listes element par element
rahim -
S -

1 réponse
LISTE M3U
FOUAD_9000 -
alex_8561 -

5 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
Listes déroulantes multiselections
Zornip -
Zornip -

9 réponses
Listes déroulantes dynamiques?
louise.artsoul -
louise.artsoul -

2 réponses