<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Page de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" lang="fr" content="Bastien Moyet" />
<script type="text/javascript" >
function initvariable(){
//on crée tableau
//on prend comme convention que:
// la ligne 0 contient les entete de colonne
// le champ 0 est la clef primaire de la table, non affichée
// le champ 1 est celui utilisé pour la sélection
var entete=new Array("Id", "Login", "Nom", "Prenom");
var enrg0=new Array("A0","B0","C0","D0");
var enrg1=new Array("A1","B1","C1","D1");
var enrg2=new Array("A2","B2","C2","D2");
var enrg3=new Array("A3","B3","C3","D3");
var tableau=new Array (entete,enrg0, enrg1, enrg2, enrg3);
return tableau
}
function crealiste(tableau){
// ------------------------------------------------------------------------------
//tableau est constitué obligatoirement:
// d'une ligne (index 0) contenant le titre des champs
// de n autres lignes contenant les enregistrements
// chaque enregistrement doit avoir le meme nombre de champ que la ligne 0
// le champ n°1 (index 0) est la clef primaire de la table
// le champ n°2 (index 1) est le champ sur lequel se fait le tri
// ------------------------------------------------------------------------------
//création de la liste déroulante
for (var i=1; i<tableau.length; i++) {
var valeur=tableau[i][0];
var nom =tableau[i][1];
var select = document.getElementById("liste");
var option = document.createElement("option");
var texte = document.createTextNode(nom);
option.setAttribute("value",i);
option.appendChild(texte);
select.appendChild(option);
}
//création du reste du formulaire
var nchamp=tableau[0].length;
for (var i=0; i<nchamp; i++) {
var formulaire = document.getElementById("leformulaire");
var champ = document.createElement("input");
var libelle = document.createElement("label");
var texte = document.createTextNode(tableau[0][i]);
var retourligne= document.createElement("br");
champ.setAttribute("type","text");
champ.setAttribute("id","champ"+i);
if (i==0) {champ.setAttribute("disabled","true");}
libelle.appendChild(champ);
libelle.appendChild(texte);
formulaire.appendChild(libelle);
formulaire.appendChild(retourligne);
}
}
function affiche (tableau){
var nchamp=tableau[0].length;
for (var i=0; i<nchamp; i++) {
champactuel="champ"+i;
index=document.getElementById("liste").value;
valeur=tableau[index][i];
document.getElementById(champactuel).value = valeur;
}
}
</script>
</head>
<body>
<div>
<form action="test.html" method="post" id="leformulaire">
<select id="liste" name="liste" onChange="javascript:affiche(mesvaleurs)"></select>
<p>------------</p>
</form>
</div>
<script type="text/javascript">
mesvaleurs=initvariable();
crealiste(mesvaleurs);
affiche(mesvaleurs);
</script>
</body>
</html>