OVH Cloud OVH Cloud

des listes liees basees sur des tables

3 réponses
Avatar
Bonjour a tous et toutes.

je me débrouille un petit peu en php... je sais faire des listes simples
basées sur des tablemysql, établir les connexions.

j'ai trouvé le code suivant sur le site aspphp.net qui permet de lier trois
listes déroulantes entre elles. mais le probleme est que les données
contenues dans les listes sont "écrites" dans le code ... et ce que je
cherche a faire c'est la meme chose mais basée surdes tables...

j'ai donc méticuleusement crée 3 tables qui reprennent les valeurs de
l'exemple...
mais je ne vois pas comment , a partir de la ligne 128 je peux passer les
valeurs a partir de mes tables... et pas non plus comment il faut s'y
prendre a partir de la ligne 164 pour créer les dépendances.

Si une ame charitable voulait bien perdre un peu de son temps me montrer
comment on peut faire cela , ou si un script de ce type existe déja quelque
part .. ça serait génial , parce que je commence a avoir la cervelle comme
de la guimauve a essayer de comprendre :-)

merci pour votre aide
voici le code :
--------------------------------------------------------------------
<html>
<head>
<title>SelectControl v0.1</title>
<script language="JavaScript">
SelectControl = function()
{
this.aSlt = new Array();
this.fSlt = "";
}

SelectControl.prototype.addSelect = function( inNAME, inSLT )
{
this.aSlt[this.aSlt.length] = new SelectList(inNAME, inSLT);
}

SelectControl.prototype.firstSelect = function( inNAME )
{
this.fSlt = inNAME;
}

SelectControl.prototype.getSelect = function( inNAME )
{
var oObj = null, i = 0;
for (i = 0; i < this.aSlt.length; i++) {
if (this.aSlt[i].name == inNAME) {
oObj = this.aSlt[i];
}
}
return oObj;
}

SelectControl.prototype.addOption = function( inNAME, inVAL, inTXT )
{
var oObj = this.getSelect(inNAME);
if (oObj) {
oObj.options[oObj.options.length] = [inVAL, inTXT];
}
}

SelectControl.prototype.getOption = function( inOBJ, inVAL )
{
var oObj = inOBJ, i = 0, oOpt = null;
for (i = 0; i < oObj.options.length; i++) {
if (oObj.options[i][0] == inVAL) {
oOpt = oObj.options[i];
}
}
return oOpt;
}

SelectControl.prototype.setLink = function( inNS1, inVS1, inNS2, inVS2 )
{
var oObj = this.getSelect(inNS1);
if (oObj) {
oObj.depends[oObj.depends.length] = [inNS2, inVS1, inVS2];
}
}

SelectControl.prototype.populate = function()
{
var oObj = this.getSelect(this.fSlt), i = 0, oOpt = null;
if (oObj) {
oOpt = new Option("- - - - -", "-1-", false, false);
oObj.oSlt.options[oObj.oSlt.length] = oOpt;
for (j = 0; j < oObj.options.length; j++) {
oOpt = new Option(oObj.options[j][1], oObj.options[j][0], false, false);
oObj.oSlt.options[oObj.oSlt.length] = oOpt;
}
}
}

SelectControl.prototype.feed = function( inSLT )
{
var oObj = this.getSelect(inSLT.name);
var oValue = "" + inSLT.options[inSLT.selectedIndex].value;
var i = 0, oSlt = null, oOpt = null, sVerif = "";
if (oObj) {
for (i = 0; i < oObj.depends.length; i++) {
if (oValue == oObj.depends[i][1]) {
if (sVerif.indexOf("§" + oObj.depends[i][0] + "§") == -1) {
this.clearSelect(oObj.depends[i][0]);
}
sVerif = "§" + oObj.depends[i][0] + "§";
oSlt = this.getSelect(oObj.depends[i][0]);
oOpt = this.getOption(oSlt, oObj.depends[i][2]);
oOpt = new Option(oOpt[1], oOpt[0], false, false);
oSlt.oSlt.options[oSlt.oSlt.length] = oOpt;
}
}
}
}

SelectControl.prototype.clearSelect = function( inNAME )
{
var oObj = this.getSelect(inNAME), oSlt = null, iLength = 0, i = 0, oOpt =
null;
if (oObj) {
oSlt = oObj.oSlt;
iLength = oSlt.options.length;
for (i = 0; i < iLength; i++) {
oSlt.options[0] = null;
}
oOpt = new Option("- - - - -", "-1-", false, false);
oSlt.options[oSlt.length] = oOpt;
}
}

SelectList = function( inNAME, inSLT )
{
this.name = inNAME;
this.oSlt = inSLT;
this.options = new Array();
this.depends = new Array();
}

var oSlt = new SelectControl();

SInit = function()
{

// On crée les SelectList
oSlt.addSelect("slt1", document.SForm.slt1);
oSlt.addSelect("slt2", document.SForm.slt2);
oSlt.addSelect("slt3", document.SForm.slt3);

// On declare le Select Maitre
oSlt.firstSelect("slt1");

// On associe les options 1ere Liste
oSlt.addOption("slt1", "1", "Animaux");
oSlt.addOption("slt1", "2", "Fruits");
oSlt.addOption("slt1", "3", "Voitures");

// On associe les options 2eme Liste
oSlt.addOption("slt2", "1", "Chat");
oSlt.addOption("slt2", "2", "Chien");
oSlt.addOption("slt2", "3", "Vache");
oSlt.addOption("slt2", "4", "Fraise");
oSlt.addOption("slt2", "5", "Poire");
oSlt.addOption("slt2", "6", "Pomme");
oSlt.addOption("slt2", "7", "Ferrari");
oSlt.addOption("slt2", "8", "Porsche");
oSlt.addOption("slt2", "9", "Renault");

// On associe les options 3eme Liste
oSlt.addOption("slt3", "1", "Persan");
oSlt.addOption("slt3", "2", "Tigré");
oSlt.addOption("slt3", "3", "Berger Allemand");
oSlt.addOption("slt3", "4", "Setter");
oSlt.addOption("slt3", "5", "Charolaise");
oSlt.addOption("slt3", "6", "Normande");
oSlt.addOption("slt3", "7", "Fraise 1");
oSlt.addOption("slt3", "8", "Fraise 2");
oSlt.addOption("slt3", "9", "Poire 1");
oSlt.addOption("slt3", "10", "Poire 2");
oSlt.addOption("slt3", "11", "Rouge");
oSlt.addOption("slt3", "12", "Verte");
oSlt.addOption("slt3", "13", "F 40");
oSlt.addOption("slt3", "14", "F 50");
oSlt.addOption("slt3", "15", "911");
oSlt.addOption("slt3", "16", "944");
oSlt.addOption("slt3", "17", "Laguna");
oSlt.addOption("slt3", "18", "Safrane");

// On cree les dependances 1ere Liste
oSlt.setLink("slt1", "1", "slt2", "1");
oSlt.setLink("slt1", "1", "slt2", "2");
oSlt.setLink("slt1", "1", "slt2", "3");
oSlt.setLink("slt1", "2", "slt2", "4");
oSlt.setLink("slt1", "2", "slt2", "5");
oSlt.setLink("slt1", "2", "slt2", "6");
oSlt.setLink("slt1", "3", "slt2", "7");
oSlt.setLink("slt1", "3", "slt2", "8");
oSlt.setLink("slt1", "3", "slt2", "9");

// On cree les dependances 2eme Liste
oSlt.setLink("slt2", "1", "slt3", "1");
oSlt.setLink("slt2", "1", "slt3", "2");
oSlt.setLink("slt2", "2", "slt3", "3");
oSlt.setLink("slt2", "2", "slt3", "4");
oSlt.setLink("slt2", "3", "slt3", "5");
oSlt.setLink("slt2", "3", "slt3", "6");
oSlt.setLink("slt2", "4", "slt3", "7");
oSlt.setLink("slt2", "4", "slt3", "8");
oSlt.setLink("slt2", "5", "slt3", "9");
oSlt.setLink("slt2", "5", "slt3", "10");
oSlt.setLink("slt2", "6", "slt3", "11");
oSlt.setLink("slt2", "6", "slt3", "12");
oSlt.setLink("slt2", "7", "slt3", "13");
oSlt.setLink("slt2", "7", "slt3", "14");
oSlt.setLink("slt2", "8", "slt3", "15");
oSlt.setLink("slt2", "8", "slt3", "16");
oSlt.setLink("slt2", "9", "slt3", "17");
oSlt.setLink("slt2", "9", "slt3", "18");

// On genere le tout
oSlt.populate();
}
</script>
</head>

<body onLoad="SInit();">
<form name="SForm" method="post" action="?">
Select 1 :
<br>
<select name="slt1" size="1" onChange="oSlt.feed(this);">
</select>
<br>
<br>
Select 2 :
<br>
<select name="slt2" size="1" onChange="oSlt.feed(this);">
</select>
<br>
<br>
Select 3 :
<br>
<select name="slt3" size="1">
</select>
</form>
</body>
</html>

3 réponses

Avatar
Gabriel
hello,
le principe va donc être d'alimenter ton code à partir de php.
je suppose que tu as une table "Animaux", "Fruits" "Voitures". Remarque,
on pourrait tout mettre dans une seule table de cette forme, perso je
préfère mais bon comme je ne sais pas ce que tu préfères, je vais partir
du cas 1 table/genre...

id nom idPere

0 Animaux null
1 Fruits null
2 Voitures null
3 Chat 0
4 Chien 0
5 Vache 0
6 Fraise 1
etc ...

Même si tu as une table/genre, la structure est la même car chaque
entrée doit savoir à quel père elle appartient
je t'écris en pseudo code ;) :

anx = bd->select("Animaux");
fruits = bd->select("Fruits");
Voitures = bd->select("Voitures");

anx contient mnt un handle de résultat qui contient tous les animaux
(chat, chien, etc ...)
Tu fais pareil pour chaque liste.

ensuite :

function generateMenu($table, $menuName, $menuDependsOn){
$compteur = 0;
while (anx->hasMoreResults()){
$compteur++;
// Génération des entrées
echo "oSlt.addOption("$menuName", "$compteur", "$anx->getNom()");
//Ensuite, il reste à gérer les liaisons :
echo "oSlt.setLink("slt1", "$anx->getidPere()", "slt2",
"$anx->getid()");


}
}
generateMenu('Animaux', 'slt2', 'slt1');

En pas objet, le principe est de faire un select sur chaque table et
d'afficher chaque résultat, en récupérant l'id père l'id courant
l'intitulé...


// On associe les options 1ere Liste
oSlt.addOption("slt1", "1", "Animaux");
oSlt.addOption("slt1", "2", "Fruits");
oSlt.addOption("slt1", "3", "Voitures");

// On associe les options 2eme Liste
oSlt.addOption("slt2", "1", "Chat");
oSlt.addOption("slt2", "2", "Chien");
oSlt.addOption("slt2", "3", "Vache");

oSlt.addOption("slt2", "4", "Fraise");
oSlt.addOption("slt2", "5", "Poire");
oSlt.addOption("slt2", "6", "Pomme");

oSlt.addOption("slt2", "7", "Ferrari");
oSlt.addOption("slt2", "8", "Porsche");
oSlt.addOption("slt2", "9", "Renault");
[snip]


// On cree les dependances 1ere Liste
oSlt.setLink("slt1", "1", "slt2", "1");
oSlt.setLink("slt1", "1", "slt2", "2");
oSlt.setLink("slt1", "1", "slt2", "3");



oSlt.setLink("slt1", "2", "slt2", "4");
oSlt.setLink("slt1", "2", "slt2", "5");
oSlt.setLink("slt1", "2", "slt2", "6");

oSlt.setLink("slt1", "3", "slt2", "7");
oSlt.setLink("slt1", "3", "slt2", "8");
oSlt.setLink("slt1", "3", "slt2", "9");
[snip]
Voilà, en espérant t'avoir un peu aidé, bonne continuation :)


cordialement,

Avatar
Antoun
j'ai donc méticuleusement crée 3 tables qui reprennent les valeurs de
l'exemple...
mais je ne vois pas comment , a partir de la ligne 128 je peux passer les
valeurs a partir de mes tables... et pas non plus comment il faut s'y


Tout d'abord, il faut que tu penses que tout ton code est en JavaScript,
donc exécuté par le navigateur... qui n'a pas directement accès à ta
base qui est sur le serveur. Il faut donc que tu aies un code serveur,
par ex. du PHP, qui interroge la base et rédige ton code JavaScript.

Par exemple, si je prends ta première liste, je suppose que tu as une
table LISTE1 comme ça :

ITEM
=== Animaux
Fruits
Voitures


Il faut donc que tu transformes ce code-là :

oSlt.addOption("slt1", "1", "Animaux");
oSlt.addOption("slt1", "2", "Fruits");
oSlt.addOption("slt1", "3", "Voitures");

en qqch comme ça (en simple et pas spécialement élégant) :

<?php
// je suppose que tu as établi la connexion à $bdd
$resu = mysql_query('SELECT ITEM FROM TABLE1', $bdd) ;
$i = 0 ;
// boucle de parcours de la table ligne par ligne
while ($ligne = mysql_fetch_array($resu) ) {
$i++ ;
// extraction de la valeur de la première (et unique) colonne
$item = $ligne[0] ;
// écriture du JavaScript
echo "oSlt.addOption('slt1', '$i', '$item');r"
}
?>

prendre a partir de la ligne 164 pour créer les dépendances.


je ne suis pas vraiment rentré dans les détails de ton JavaScript, mais
avec un peu de chance ça devrait marcher tel quel.

Avatar
Merci pour ta réponse Gabriel, je vais étudier ça et je te tiendrai au
courant, je crois que je comprends tes explications...



Gabriel wrote:
hello,
le principe va donc être d'alimenter ton code à partir de php.
je suppose que tu as une table "Animaux", "Fruits" "Voitures".
Remarque, on pourrait tout mettre dans une seule table de cette
forme, perso je préfère mais bon comme je ne sais pas ce que tu
préfères, je vais partir du cas 1 table/genre...

...