begin process at 2008 08 28 21:50:10
1 233 393 membres
485 nouveaux aujourd'hui
14 291 membres club

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

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

Note :
9,57 / 10 - par 7 personnes
9,57 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (22)
Ajouter un commentaire et/ou une note

Description

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 !
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

  • signaler à un administrateur
    Commentaire de bob3000 le 01/04/2004 01:38:21

    honnetement, c'est excellent!!!! bravo!

  • signaler à un administrateur
    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).

  • signaler à un administrateur
    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 ! ;)

  • signaler à un administrateur
    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 !

  • signaler à un administrateur
    Commentaire de outofcontrol le 14/04/2004 16:24:08

    Alors la ça c'est bo . . .

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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)

  • signaler à un administrateur
    Commentaire de DoudouBidou le 04/06/2004 06:26:59

    c'est mis à jour, plus vite que prévu ;)

  • signaler à un administrateur
    Commentaire de OuPinaise le 08/06/2004 15:55:44

    Merci man, je teste dès que j'ai le temps.

  • signaler à un administrateur
    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.

  • signaler à un administrateur
    Commentaire de DoudouBidou le 08/06/2004 21:51:45

    de quoi qui est trop long? le temps de réaction ?

  • signaler à un administrateur
    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 !!

  • signaler à un administrateur
    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('&nbsp;<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

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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.

  • signaler à un administrateur
    Commentaire de frop01 le 29/08/2004 20:05:06

    excellent !

  • signaler à un administrateur
    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 ... !!

  • signaler à un administrateur
    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

  • signaler à un administrateur
    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 ?

  • signaler à un administrateur
    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

  • signaler à un administrateur
    Commentaire de hexenez le 31/01/2007 16:23:06

    Super script ! Merci beaucoup !

Ajouter un commentaire

Pub



Appels d'offres

Recherche developpeur ...
Budget : 700€
SITE MARCHAND LOCATION...
Budget : 3 000€
SITE MARCHAND POUR HOTEL
Budget : 4 000€

CalendriCode

Août 2008
LMMJVSD
    123
45678910
11121314151617
18192021222324
25262728293031

VS Express FR Gratuit !

VS Express en français et 100% gratuit !

Boutique

Boutique de goodies CodeS-SourceS