Création d'une 2ème liste en fonction de la sélection d'une 1ère liste sans rechargement

Soyez le premier à donner votre avis sur cette source.

Vue 14 640 fois - Téléchargée 2 960 fois


Télécharger le projet
Commenter

Description

Ouvrez le fichier ListeDyn.html tout est expliqué est en couleur ;)
Le code javascript est commenté dans la source.
J'ai intégré le code php pour une utilisation dynamique de cette page.

Conclusion :


Aucune vérification n'est faite si vos données contiennent des " dans la liste de titre ou de valeur dans le javascript.
Donc a prévoir si vous ne voulez d'erreur javascript de le cas ou vous utilise le caractere ".
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
creato
Messages postés
1
Date d'inscription
mercredi 15 mars 2006
Statut
Membre
Dernière intervention
15 mars 2006
 -
C'est super. Très bon script.

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>
Signaler
JemsTOUDIC
Messages postés
1
Date d'inscription
dimanche 21 décembre 2003
Statut
Membre
Dernière intervention
14 janvier 2006
 -
Salut ..
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
Signaler
eax
Messages postés
728
Date d'inscription
jeudi 20 juin 2002
Statut
Membre
Dernière intervention
7 novembre 2007
 -
excellent!
clair, pleins d'exemples, très bien expliqué :p
Signaler
apxa
Messages postés
188
Date d'inscription
mercredi 15 mai 2002
Statut
Membre
Dernière intervention
25 avril 2009
 -
Iop schtroumf,
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
Signaler
cs_schtroumf
Messages postés
59
Date d'inscription
mercredi 8 octobre 2003
Statut
Membre
Dernière intervention
22 juillet 2008
 -
c'est cool quand on reste avec que du javascript car manque de pot, en php la page est obligée de se recharger vu que le code ne reste pas comme le javascript... :(
Afficher les 7 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (apxa)