18041 sujets

Questions générales et questions de débutants

À votre bon coeur et connaissances

Bonjour,
Je fais appel à votre bon coeur et connaissances car je cherche depuis des jours et des jours sans trouver la solution. Je précise que si je ne trouve pas la solution c'est parce que je ne connais l'info en développement. Juste en utilisateur.
Je souhaite faire une page html perso avec des select imbriqués (ou filtrés). Le choix final fait, il affiche les valeurs correspondantes (un peu à la façon excel)

ex pour des produits:
Select1: Choix11 , Choix12, Choix13, Choix 14.
--> si choix13 selectionné filtre ce qui correspond à ce choix dans select2
Select2: Choix21, Choix22, Choix23.
--> si choix22 selectionné affiche les résultats correspondants au matériels sélectionné dans 4 champs différents pour afficher la hauteur H, largeur l, Longeur L, Pds P.

J'espère avoir été clair.
Par avance merci à vous.
Laurent
Smiley biggrin
Modifié par 6l20 (07 Dec 2014 - 09:13)
Bonsoir,

Ce que tu veux faire n'est évidemment pas possible sans avoir recours à Javascript, il y a plusieurs manières de faire selon la complexité de tes données.

Ce n'est pas forcément simple à réaliser, le problème doit-être posé à plat, en se demandant si il faut tout mettre en dur dans le HTML, et planquer tous les selects de niveau 2 au chargement de la page pour ensuite les afficher en fonction du choix effectué dans le select n°1. Cette solution paraît simple mais si ta base de données est importante (beaucoup de produits), ce sera peut-être judicieux de faire un appel serveur pour aller récupérer les données filtrées, peut-être que le <select> n'est pas la manière la plus efficace de réaliser ce choix...

Il faudrait plus d'éléments sur ce que tu veux vraiment faire pour te faire aider, mais dans tous les cas il va falloir apprendre le javascript, tu n'y coupera pas Smiley cligne
Merci pour ta réponse. Voici ou j'en suis en me basant sur de l'existant mais je n'avance plus.
Peux tu m'aider? Merci

<HTML>
<HEAD>
<TITLE>2 Selects dépendants en JavaScript</TITLE>
<script type="text/javascript">
var liste = new Array(new Array("PROD1F1","PROD2F1","PROD3F1","PROD4F1" ),
new Array("PROD1F2","PROD2F2","PROD3F2","PROD4F2" ),
new Array("PROD1F3","PROD2F3" ),
new Array("PROD1F4","PROD2F4","PROD3F4" ));
function gensel2(nom_formulaire) {
var s1 = document.forms[nom_formulaire].sel1;
var s2 = document.forms[nom_formulaire].sel2;
var lg = document.forms[nom_formulaire].long;

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];
}
lg.value = s2.options[s2.selectedIndex].value;
if (s1.value != "nul" && s2.value != "nul" ) {
for(var n=0; n < liste[s1.selectedIndex-1].length; n++) {
if (s2.selectedIndex == (n+1)) {
res.value = liste[s1.selectedIndex-1][n];
}
}
} else {
res.value = 0;
}
}
</script>
</HEAD>
<BODY>
<form name="frm">
<p>
<select name="sel1" id="sel1" onChange="gensel2('frm');">
<option selected>Fournisseur1</option>
<option >Fournisseur2</option>
<option>Fournisseur3</option>
<option>Fournisseur4</option>
</select>
<select name="sel2" id="sel2">
</select>
</p>
<p>Long:
<input name="" type="text" value="0" size="6">
Larg: <input name="Larg" type="text" value="0" size="6">
Prof: <input name="Prof" type="text" value="0" size="6">
Haut: <input name="Haut" type="text" value="0" size="6">
Pds: <input name="Pds" type="text" value="0" size="6">
</p>
<p>Je souhaite que lorque je selectionne fournisseur 1puis un produit de ce fournisseur, il me soit indiqué les dimensions, poids...</p>
<p>&nbsp;</p>
</form>
<script type="text/javascript">
gensel2('frm');
document.frm.sel2.selectedIndex = 2;
</script>
</BODY>
</HTML>
Tu as fait (ou quelqu'un t'a fait) la première partie du boulot, c'est à dire rafraîchir dynamiquement le deuxième <select> à partir du premier, maintenant il faut mettre à jour les données des champs en conséquence. Mais si tu n'as pas de question précise je ne peux pas t'aider.

Le plus simple pour toi serait de placer un évènement sur le onchange du select n°2, et en fonction des valeurs du s1 & s2 tu change les valeurs des champs.
Pour changer la valeur d'un champ, met lui d'abord un id
Larg: <input name="Larg" [b]id="largeur"[/b] type="text" value="0" size="6">


Comme ça tu peux facilement modifier ce qu'il contient :
document.getElementById("[b]largeur[/b]").value = "Nouvelle valeur !"
Merci pour ta réponse freez.

A défaut d'une question, ce que je cherche à faire comme par exemple pour des autos:

Marque:
Citroen,
Renault
Peugeot
Audi

En sélectionnant Citroen par exemple, le select filtrera le modèle: C3, C4, C5, Picasso... (ex Picasso)
En sélectionnant la version, le select filtrera également les versions Business, exclusive... (ex Business)

et en sélectionnant le modèle Citroen, Picasso, Business, il m'indique la cons, le CO2, les Chevaux... dans des champs indépendants.

Je souhaite quelque chose de facilement modifiable pour moi qui ne suite pas programmeur donc le html me convient bien mais si tu as une solution simple je suis à l'écoute.

Par avance merci à toi.
Laurent
Sujet clos
Aller à