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 697 fois - Téléchargée 2 970 fois
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.
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 ".
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 ".
Codes Sources
A voir également
- Création d'une 2ème liste en fonction de la sélection d'une 1ère liste sans rechargement
- Création d'une 2ème liste en fonction de la sélection d'une 1ère liste sans rechargement - Codes sources - PHP (Formulaires)
- PHP : Afficher une liste déroulante en fonction d'une autre liste sans recharger la page ou p - Guide
- Html disk catalog (creation d'une page web en fonction du contenu des répertoires) - Codes sources - Visual Basic / VB.NET (Fichier / Disque)
- Creation + utilisation d'une libraire (classes & fonctions) - Codes sources - C / C++ / C++.NET (Système)
- Création de x tableaux dans une fonction ✓ - Forum - Flash
Commentaires
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>
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
clair, pleins d'exemples, très bien expliqué :p
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
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.