CRÉER UNE LISTBOX À PLUSIEURS COLONNES À PARTIR D'UNE BALISE SELECT
bob3000
Messages postés
406
Date d'inscription
mardi 7 mai 2002
Statut
Membre
Dernière intervention
2 octobre 2004
-
1 avril 2004 à 01:38
gclergeaud Messages postés 1 Date d'inscription lundi 26 novembre 2007 Statut Membre Dernière intervention 15 janvier 2009 - 15 janv. 2009 à 12:28
gclergeaud Messages postés 1 Date d'inscription lundi 26 novembre 2007 Statut Membre Dernière intervention 15 janvier 2009 - 15 janv. 2009 à 12:28
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/21582-creer-une-listbox-a-plusieurs-colonnes-a-partir-d-une-balise-select
https://codes-sources.commentcamarche.net/source/21582-creer-une-listbox-a-plusieurs-colonnes-a-partir-d-une-balise-select
15 janv. 2009 à 12:28
J'ai un petit soucis avec ce script.... Il ne fonctionne pas correctement sur mozilla. J'ai donc repris le code de AMOSC. Mon seul probleme est que je dois pouvoir faire des choix multiples... Du coup je suis coincer... Quelques peut m'aider???
Merci,
Guigo
31 janv. 2007 à 16:23
9 févr. 2005 à 07:50
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
8 févr. 2005 à 09:58
J'aimerai savoir, à quoi sert le onChange="test()" dans la page html ?
1 févr. 2005 à 17:05
Merci par avance pour la réponse
6 sept. 2004 à 12:22
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');
}
document.write('');
}
document.write('
');
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 ... !!
29 août 2004 à 20:05
18 août 2004 à 15:22
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.
17 août 2004 à 14:04
merci pour ton code
je modifierai le zip dès que jaurai un peu de temps :)
@+
Seb
17 août 2004 à 12:18
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;i0)&&(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('
');
document.write('');
for (i=0;i<nb_obj;i++) {
if(i == 0) document.write('----
');
else document.write('----
');
for (n=0;n<obj.options[i].innerHTML.split('|').length;n++) {
document.write('');
document.write(obj.options[i].innerHTML.split('|')[n]);
document.write(', ');
}
document.write('');
}
document.write('
');
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
16 août 2004 à 17:37
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 !!
8 juin 2004 à 21:51
8 juin 2004 à 16:08
Enfin bon bo boulota quand meme.
8 juin 2004 à 15:55
4 juin 2004 à 06:26
3 juin 2004 à 12:40
3 juin 2004 à 12:35
3 juin 2004 à 10:53
Je me trompe ?
Malheureusement j'ai besoin d'un script comme le tien mais j'ai aussi besoin de ppouvoir choisir plusieurs lignes
14 avril 2004 à 16:24
5 avril 2004 à 12:57
pour NS, chépa, depuis qu'il y a mozilla, ns est bien un peu cuit !
5 avril 2004 à 12:41
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 ! ;)
5 avril 2004 à 09:15
ç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).
1 avril 2004 à 01:38