CRÉATION D'UNE 2ÈME LISTE EN FONCTION DE LA SÉLECTION D'UNE 1ÈRE LISTE SANS RECH
bob3000
Messages postés
406
Date d'inscription
mardi 7 mai 2002
Statut
Membre
Dernière intervention
2 octobre 2004
-
1 mai 2003 à 00:03
creato Messages postés 1 Date d'inscription mercredi 15 mars 2006 Statut Membre Dernière intervention 15 mars 2006 - 15 mars 2006 à 03:20
creato Messages postés 1 Date d'inscription mercredi 15 mars 2006 Statut Membre Dernière intervention 15 mars 2006 - 15 mars 2006 à 03:20
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/16149-creation-d-une-2eme-liste-en-fonction-de-la-selection-d-une-1ere-liste-sans-rechargement
https://codes-sources.commentcamarche.net/source/16149-creation-d-une-2eme-liste-en-fonction-de-la-selection-d-une-1ere-liste-sans-rechargement
15 mars 2006 à 03:20
Petite question, comment supprimer l'affichage de tous les résultats de la première liste?
J'ai réussi à supplimer input et zone texte. Mais layer impossible.
je travaille directement sur le fichier sorce en html.
Merci de votre aide à tous par avance.
Mon script:
<html>
<head>
<title>Exemple d'utilisation d'affichage d'un deuxieme select en fonction de la premiere selection</title>
<style>
.phpcomment {font-family: Arial;color: #339933}
.phpstring {font-family: Arial;color: #FF9999}
.phpfunction {font-family: Arial;color: #FF0000}
.mysqlfunction {font-family: Arial;color: #336699}
</style>
<script>
//Fonction qui affiche le resultat sélectionné d'une liste définie
function afficheResulat(numliste) {
//Verification que l'on a bien selectionné un élèment de la liste
if(eval("document.form" + numliste + ".liste" + numliste + ".selectedIndex") >= 0 && eval("document.form" + numliste + ".liste" + numliste + ".selectedIndex") < eval("document.form" + numliste + ".liste" + numliste + ".options.length")) {
//Récupération de la valeur de la liste
var data = eval("document.form" + numliste + ".liste" + numliste + ".options[document.form" + numliste + ".liste" + numliste + ".selectedIndex].value");
//Affichage du résultat dans un input text
eval("document.form" + numliste + ".inputtextresultat" + numliste +".value = data");
//Affichage du résultat dans un layer
if(document.all) {
//(
pour IE)
eval("layerresultat" + numliste + ".innerHTML = data");
} else {
//(<layer> pour NS)
eval("window.document.layerresultat" + numliste + ".document.open()");
eval("window.document.layerresultat" + numliste + ".document.write(data)");
eval("window.document.layerresultat" + numliste + ".document.close()");
}
}
}
//Fonction qui récupere le titre d'un id défini
function recupTitre(id) {
//Liste des titres possibles (id,Titre)
var strTitre = "1,500;2,1000;3,2000;4,3000;5,5000;6,1000;7,500;8,1000;9,2000;10,3000;11,5000;12,10000";
var lstTitre = strTitre.split(";"); //On split les enregistrements
var result = "";
for (j=0;j<lstTitre.length;j++) {
var lstData = lstTitre[j].split(","); //On split les id, des Titres
//Vérification de l'existance de données dans la liste pour l'id donnée
if(lstData[0] == id) { //Recherche de l'id dans la liste
result = lstData[1];
break;
}
}
return result;
}
//Fonction qui récupere la valeur d'un id défini
function recupValeur(id) {
//Liste des valeurs possibles (id,Valeur)
var strValeur = "1,1?;2,2?;3,3?;4,4?;5,5?;6,10?;7,1.5?;8,2.5?;9,3.5?;10,4.5?;11,5.5?;12,10.5?";
var lstValeur = strValeur.split(";"); //On split les enregistrements
var result = "";
for (j=0;j<lstValeur.length;j++) {
var lstData = lstValeur[j].split(","); //On split les id, des Valeurs
//Vérification de l'existance de données dans la liste pour l'id donnée
if(lstData[0] == id) { //Recherche de l'id dans la liste
result = lstData[1];
break;
}
}
return result;
}
//Fonction qui efface les élèments d'une liste définie
function effaceListe(numliste) {
//Vérification de l'existance d'élèment dans la liste
if(eval("document.form" + numliste + ".liste" + numliste + ".options.length") > 0) {
//Suppression des élèments
for(i=(eval("document.form" + numliste + ".liste" + numliste + ".options.length")-1);i>=0;i--) {
eval("document.form" + numliste + ".liste" + numliste + ".options[i] = null");
}
}
//Selection d'aucun élèment dans la liste
eval("document.form" + numliste + ".liste" + numliste + ".selectedIndex = -1");
}
//Fonction qui efface les résultat affichées d'une liste définie
function effaceResulat(numliste) {
//Effacement du résultat dans un input text
eval("document.form" + numliste + ".inputtextresultat" + numliste +".value = ''");
//Effacement du résultat dans un layer
if(document.all) {
//(
pour IE)
eval("layerresultat" + numliste + ".innerHTML = ''");
} else {
//(<layer> pour NS)
eval("window.document.layerresultat" + numliste + ".document.open()");
eval("window.document.layerresultat" + numliste + ".document.write('')");
eval("window.document.layerresultat" + numliste + ".document.close()");
}
}
//Fonction qui crée la 2ème liste
function creeListe() {
//On affiche le résultat de la 1ère liste
afficheResulat(1);
//On efface les élèments de la 2ème liste
effaceListe(2);
//On efface les résultats de la 2ème liste
effaceResulat(2);
//Verification que l'on a bien selectionné un élèment de la liste
if(document.form1.liste1.selectedIndex >= 0 && document.form1.liste1.selectedIndex < document.form1.liste1.options.length) {
//Récupération de la valeur de la liste
var id = document.form1.liste1.options[document.form1.liste1.selectedIndex].value;
//Verification de l'existance d'id
if(id != "") {
var valeur = "";
var titre = "";
//Création de la 2ème liste
var lstid = id.split(",");
for(i=0;i<lstid.length;i++) {
if(lstid[i] != "") {
//Récupération du titre et de la valeur
titre = recupTitre(lstid[i]);
valeur = recupValeur(lstid[i]);
//Vérification de l'existance du titre et de la valeur
if(valeur != "" && titre != "") {
document.form2.liste2.options[document.form2.liste2.options.length] = new Option(titre,valeur,false,false);
}
}
}
//Selection d'aucun élèment dans la 2ème liste
document.form2.liste2.selectedIndex = -1;
}
}
}
</script>
</head>
<center>
</center>
<center>
<form name=\"form1\">
----
1ère Liste :,
<select name="liste1" onChange="creeListe()">
<option value="1,2,3,4,5,6">Recto</option>
<option value="7,8,9,10,11,12">Recto/Verso</option>
</select>
,
</form>
----
Résultat dans un layer :,
<layer name="layerresultat1">
</layer>
<form name=\"form2\">
----
2ème Liste :,
<select name="liste2" onChange="afficheResulat(2)">
</select>
,
</form>
----
Résultat dans un layer :,
<layer name="layerresultat2">
</layer>
</center>
<script>
//Selection d'aucun élèment dans les listes au chargement de la page
document.form1.liste1.selectedIndex = -1;
document.form2.liste2.selectedIndex = -1;
</script>
</html>
14 janv. 2006 à 03:14
Merci pour ton code.. il est vraiment super bien ..
Mais j'ai encore un petit problème que je n'arrive pas a régler ..
En fait j'ai adapter le code de façon a ce qu'il affiche les données stockées dans une base de donnée MySQL.ça ça a très bien marché, par contre, je voudrai que dans un même formulaire, il y ai 2 fois chaque liste déroulant. Que la liste1 et la liste3 contienne les même donnée, mais qu'elle n'interagissent pas entre elle pour ce qui doits'afficher dans les liste 2 et 4.
Si quelqu'un peu résoudre mon pb svp ..
Merci beaucou^p
2 août 2004 à 11:28
clair, pleins d'exemples, très bien expliqué :p
4 févr. 2004 à 14:52
En réponse à ton problème, je te conseillerais d'adapter le code de sorte à conserver l'état des listes si la page se recharge.
Code du style:
...
<select name="frmSelect">
<?
for($i=0;$i<[nboption];$i++) {
$selected = "";
if($frmSelect [option_value]) $selected "SELECTED";
echo "<option value='".[option_value]."' ".$selected.">".[option_name]."</option>";
}
?>
</select>
...
[nboption] : nombre d'option total
[option_value] : valeur de l'option
[option_name] : nom de l'option
ps: pour ce genre de problème je te conseille d'axer tes recherches sur www.phpfr.com ou de demander sur le chat #programmation
3 févr. 2004 à 21:22
1 mai 2003 à 16:22
;)
1 mai 2003 à 00:03
ca pourrait etre utile dans un formulaire
bob3000