Listes déroulantes
Slider8
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
charcom Messages postés 61 Date d'inscription Statut Membre Dernière intervention -
charcom Messages postés 61 Date d'inscription Statut Membre Dernière intervention -
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 :
Merci d'avance pour votre aide.
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.
A voir également:
- Listes déroulantes
- Listes déroulantes excel - Guide
- Listes déroulantes en cascade excel - Guide
- Supprimer les listes déroulantes excel - Forum Excel
- Effacer liste déroulante - Forum Réseaux sociaux
- Supprimer liste déroulante Excel ✓ - Forum Excel
3 réponses
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.
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.
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 :
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>
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> :
puis en lieu et place de ton menu déroulant :
Bien sûr, tu mets les liens corrects dans Value et les bons intitulés à la place de option 1, option 2, etc.
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.
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.