CRÉER UNE LISTBOX À PLUSIEURS COLONNES À PARTIR D'UNE BALISE SELECT

Information sur la source

Catégorie :Formulaire Niveau : Débutant Date de création : 30/03/2004 Date de mise à jour : 03/06/2004 22:05:40 Vu / téléchargé: 14 796 / 1 487

Auteur : DoudouBidou

Ecrire un message privé

Note :

9,57 / 10

Commentaire sur cette source (22)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Ce petit code permet d'afficher une listbox à plusieurs colonnes (voir la capture) à partir d'une balise SELECT

ça fonctionne dans les cas simple, il faudra faire évoluer cette source si vous souhaiter faire des choses plus compliqué comme des evènements etc
Deplus ça fonctionne avec IE 6 mais je n'ai pas testé ailleurs ça devrait fonctionné sous netscape...

la syntaxe est simple
vous créez votre balise select puis le script se charge de faire les modifications
il y a un fichier d'exemple (test.html)

pour créer une nouvelle colonne il suffit de séparer les argument par un |
note : il est important de spécifier le width !

exemple :
<select id="test" size=3 multiple style="width:300">
<option>toto|33ans</option>
<option>lulu|24ans</option>
<option>nana|21ans</option>
</select>
suivi de :
<script>listbox('test')</script>

si vous n'ajoutez pas ce code, l'affichage se fera normalement

Conclusion

voilà le script gère également les sélections multiple !

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

listbox.JPG 34 333 octets
listbox.js 2 220 octets
test.html 691 octets

Télécharger le zip

Sources de la même categorie

Toutes les sources de la catégorie Formulaire

Commentaires

Commentaire de bob3000 le 01/04/2004 01:38:21

honnetement, c'est excellent!!!! bravo!
Commentaire de iubito le 05/04/2004 09:15:18

BRAVO!
ça marche sur IE6, Mozilla, Opéra !
ça mérite un bon 10/10 ;)

juste un truc, mais c'est lié au couleurs je pense, quand on a cliqué sur un élément, qui devient bleu, puis qu'on repasse la souris dessus, on a du blanc sur fond blanc (sur les 3 navigateurs).
Commentaire de DoudouBidou le 05/04/2004 12:41:25

merci :)
en fait ça risque pas de marcher sous NetScape car les évèvements ne sont pas déclenché de la même manière ;)

pour les truc des couleurs je mettrai tout ça dans la mise à jour

PS : si ça mérite 10 ben notez moi ! ;)
Commentaire de iubito le 05/04/2004 12:57:26

oups ouais j'avé oublié de mettre la note :-p
pour NS, chépa, depuis qu'il y a mozilla, ns est bien un peu cuit !
Commentaire de outofcontrol le 14/04/2004 16:24:08

Alors la ça c'est bo . . .
Commentaire de OuPinaise le 03/06/2004 10:53:31

bonjour, ça ma l'air pas mal du tout, mais je n'ai pas l'impression que ça puisse marcher si on veut une liste à sélection multiple.
Je me trompe ?

Malheureusement j'ai besoin d'un script comme le tien mais j'ai aussi besoin de ppouvoir choisir plusieurs lignes
Commentaire de DoudouBidou le 03/06/2004 12:35:55

oui effectivement je n'ai pas mis à jour le code mais si ça t'interesse je peux essayer de faire ça ce weekend
Commentaire de OuPinaise le 03/06/2004 12:40:23

Ca serait sympa, mais bon s'il fait beau ne te gache pas la journée pour moi ;o)
Commentaire de DoudouBidou le 04/06/2004 06:26:59

c'est mis à jour, plus vite que prévu ;)
Commentaire de OuPinaise le 08/06/2004 15:55:44

Merci man, je teste dès que j'ai le temps.
Commentaire de OuPinaise le 08/06/2004 16:08:08

Ca marche, mais c trop long quand on a une grande liste (ce qui est mon cas : je la remplit en php depuis une grosse table).

Enfin bon bo boulota quand meme.
Commentaire de DoudouBidou le 08/06/2004 21:51:45

de quoi qui est trop long? le temps de réaction ?
Commentaire de amosc le 16/08/2004 17:37:16

salut

Je sais que tt le monde te la dis mais encore bravo ...
:p

Moi par contre j'ai un probleme
tu peux avoir juste une liste controler par ton JS mais pas plusieurs, car ya des variables global !!

Le plus rapide serai de les integré dans une classe se serais cool
car moi j ai plusieurs liste et jusqua maintenant c est la merde !!
Commentaire de amosc le 17/08/2004 12:18:03

Re-Salut,

j'ai modifier le code pour que l'on puisse avoir plusieurs select, sans pour autant tout mettre dans une classe ...

(je te consielle quand meme de crée un objet sa pourrai etre trés sympa :p)

voici le code :

var color_selec='#e59b0b';
var color_over='#6699cc';

function trover(tab) {
if (tab.bgColor != color_selec){
tab.bgColor = color_over;
}
tab.style.border = 'thin inset';
tab.style.cursor = 'hand';
}

function trout(tab) {
if (tab.bgColor != color_selec){
tab.bgColor='#ffffff';
}
}

function trclick(tab,name) {
affecter(name)
var ligne=0;
for (i=0;i<alltr.length;i++){
if (alltr[i].sourceIndex==tab.sourceIndex)
ligne=i;
}

if (ligne<nb_obj) {
if ((multiple>0)&&(window.event.ctrlKey==true)){
if (obj.options[ligne].selected == true) {
obj.options[ligne].selected = false;
}
else obj.options[ligne].selected = true;
}

else obj.selectedIndex = ligne;

}
majtab(name);
}

function majtab(name) {
affecter(name)
for (i=0;i<alltr.length;i++)
{
if (obj.options[i].selected == true) {
alltr[i].bgColor=color_selec;
alltr[i].style.color='#ffffff';
}
else {
alltr[i].bgColor='#ffffff';
alltr[i].style.color='#000000';
}
}
}

function listbox(name) {
obj=document.getElementById(name);
obj.style.display='none';
nb_ligne=obj.size;
nb_obj=obj.options.length;
multiple=obj.type.search('multiple');

document.write(' <div id="divlistbox'+name+'" style="height:100;overflow:auto;border:thin inset" onselectstart="return false">');
document.write('<table id="listbox'+name+'" border=0 cellspacing=0 cellpadding=0 bgcolor=#ffffff>');
for (i=0;i<nb_obj;i++) {
if(i == 0) document.write('<tr style="font-weight:bold" height=20>');
else document.write('<tr height=20>');
for (n=0;n<obj.options[i].innerHTML.split('|').length;n++) {
document.write('<td class=txtbleusimple>');
document.write(obj.options[i].innerHTML.split('|')[n]);
document.write('</td>');
}
document.write('</tr>');
}
document.write('</table></div>');

document.getElementById('listbox'+name).style.width= parseInt(obj.style.width)-21
document.getElementById('divlistbox'+name).style.width= parseInt(obj.style.width);
document.getElementById('divlistbox'+name).style.height= nb_ligne*20;
alltr = document.getElementById('listbox'+name).getElementsByTagName("tr");

for (i=0;i<alltr.length;i++){
  alltr[i].onmouseover= new Function("trover(this,'"+name+"')");
  alltr[i].onmouseout = new Function("trout(this,'"+name+"')");
  alltr[i].onclick = new Function("trclick(this,'"+name+"')");
}
}

function affecter(name){
obj=document.getElementById(name);
obj.style.display='none';
nb_ligne=obj.size;
nb_obj=obj.options.length;
multiple=obj.type.search('multiple');
alltr = document.getElementById('listbox'+name).getElementsByTagName("tr");
}

@@+

Amos
Commentaire de DoudouBidou le 17/08/2004 14:04:58

c'est une bonne idée
merci pour ton code
je modifierai le zip dès que jaurai un peu de temps :)

@+
Seb
Commentaire de Steph666 le 18/08/2004 15:22:18

Bonjour,

j'avais modifié ton code pour en faire un objet et pouvoir en créer plusieurs, sur :
http://www.javascriptfr.com/code.aspx?ID=22006
J'aimerais bien des commentaires voire ce que vous en pensez.

Stéph.
Commentaire de frop01 le 29/08/2004 20:05:06

excellent !
Commentaire de amosc le 06/09/2004 12:22:50

Salut,

C'est encore moi ... :p

Pour que le code marche sous les moteur NetScape (mozilla, M.Firefox ...)

Il faut enlever :

if ((multiple>0)&&(window.event.ctrlKey==true)){
if (obj.options[ligne].selected == true) {
obj.options[ligne].selected = false;
}
else obj.options[ligne].selected = true;
}

car Netscape ne comprend pas window.event.ctrlKey

et il faut remplacer tous les [obj].sourceIndex par innerHTML, je ne comprend pas pourquoi il n'arrive pas à lire sourceIndex !!

Pour résourdre se petit bleme, j'ai adopté une ruse j'ai mis innerHTML, et sa marche mais pour eviter des probleme avec des ligne qui aurai le meme contenue, je vous invite a mettre dans le td un id alleatoire (ou l'index de la boucle) ;-)

Voici le nouveau code :

var color_selec='#ebebfb';
var color_over='#ebebf0';

function trover(tab) {

if (tab.bgColor != color_selec){
tab.bgColor = color_over;
}
tab.style.border = 'thin inset';
tab.style.cursor = 'hand';
}

function trout(tab) {
if (tab.bgColor != color_selec){
tab.bgColor='#ffffff';
}
}

function trclick(tab,name) {
affecter(name);
var ligne=0;
for (i=0;i<alltr.length;i++){
if (alltr[i].innerHTML==tab.innerHTML)
ligne=i;
}

if (ligne<nb_obj)
obj.selectedIndex = ligne;

majtab(name);
}

function majtab(name) {
affecter(name);
for (i=0;i<alltr.length;i++)
{
if (obj.options[i].selected == true) {
alltr[i].bgColor=color_selec;
alltr[i].style.color='#ffffff';
}
else {
alltr[i].bgColor='#ffffff';
alltr[i].style.color='#000000';
}
}
}

function listbox(name) {
obj=document.getElementById(name);
obj.style.display='none';
nb_ligne=obj.size;
nb_obj=obj.options.length;
multiple=obj.type.search('multiple');

document.write('<div id="divlistbox'+name+'" style="height:100;overflow:auto;border:thin inset" onselectstart="return false">');
document.write('<table id="listbox'+name+'" border=0 cellspacing=0 cellpadding=0 bgcolor=#ffffff>');
for (i=0;i<nb_obj;i++) {
if(i == 0) document.write('<tr height=20>');
else document.write('<tr height=20>');
for (n=0;n<obj.options[i].innerHTML.split('|').length;n++) {
if(i==0)document.write('<td class=txtbleusimple id="'+i+'">');
else document.write('<td class=txtrougesimple id="'+i+'">');
document.write(obj.options[i].innerHTML.split('|')[n]);
document.write('</td>');
}
document.write('</tr>');
}
document.write('</table></div>');

document.getElementById('listbox'+name).style.width= parseInt(obj.style.width)-21
document.getElementById('divlistbox'+name).style.width= parseInt(obj.style.width);
document.getElementById('divlistbox'+name).style.height= nb_ligne*20;
alltr = document.getElementById('listbox'+name).getElementsByTagName("tr");

for (i=0;i<alltr.length;i++){
  alltr[i].onmouseover= new Function("trover(this,'"+name+"')");
  alltr[i].onmouseout = new Function("trout(this,'"+name+"')");
  alltr[i].onclick = new Function("trclick(this,'"+name+"')");
}
}

function affecter(name){
obj=document.getElementById(name);
obj.style.display='none';
nb_ligne=obj.size;
nb_obj=obj.options.length;
multiple=obj.type.search('multiple');
alltr = document.getElementById('listbox'+name).getElementsByTagName("tr");
}

@+

ps: Vive l'OpenSource ... !!
Commentaire de gregalex le 01/02/2005 17:05:17

J'aimerais savoir comment gérer la taille des colonnes avec ce module.
Merci par avance pour la réponse
Commentaire de oluha le 08/02/2005 09:58:15

Super source ! Merci !
J'aimerai savoir, à quoi sert le onChange="test()" dans la page html ?
Commentaire de DoudouBidou le 09/02/2005 07:50:15

Bonne question oluha
certainement un oubli j'avais du créer une petite fonction pour faire un essai

désolé gregalex mais j'ai fait cette source il y a pas mal de temps et je ne sais plus si c'est possible ou non
Commentaire de hexenez le 31/01/2007 16:23:06

Super script ! Merci beaucoup !