Recherche SelectBox avec Checkbox pour multiselection

Version imprimable

04/03/2007, 01h31
yousky

Recherche SelectBox avec Checkbox pour multiselection

Bonjour à tous,

Etant un habitué du développement sous Delphi, j'avais l'habitude d'utiliser un composant bien pratique, le CheckListBox = une liste déroulante contenant pour chaque élément un checkbox, permettant ainsi la multi sélection dans une liste déroulante.

En ce moment je suis sur un projet de site web en php + toutes les autres technos pouvant si ratacher.

Je cherche donc la possibilité d'avoir le même composant (Liste déroulante avec checkbox permettant une multiselection) sur une page web tout simplement. J'ai beau chercher sur le net des choses pouvant s'en rapprocher, je ne trouve que des selectbox (une liste de valeur affichées) avec checkbox et pas de checklistbox :-(

Que pouvez vous me conseiller si vous avez déjà eu ce problème à gérer ?

Merci encore :)
A bientôt
Yousky
05/03/2007, 14h55
bigboomshakala

bonjour,

il est assez simple d'implémenter soi-même une checkboxlist. c'est un contrôle constitué d'un label (ou un input text) et d'une div (position absolute, masquée au départ).

dans ta div tu peux mettre une table contenant les checkbox dans la 1ere colonne, le libellé du choix dans la 2è, et la valeur du choix quelquepart.
ou mieux qu'une table, des div les une en dessous des autres contenant la check et le libellé et auxquelles tu donnent un attribut 'value' qui contient la value du choix
05/03/2007, 15h02
dehian

Une liste deroulante peut permettre la selection multiple sans checkbox simplement avec le parametre "multiple" et en utilisant la touche ctrl enfoncée pendant la selection

Citation:

Une liste deroulante peut permettre la selection multiple sans checkbox simplement avec le parametre "multiple" et en utilisant la touche ctrl enfoncée pendant la selection

+1

Et voici la syntaxe de liste à sélection multiple :
Code:

1 2 3 4 5 6 7 8 9 <select size="4" id="combo" multiple="multiple"> <option selected="selected" value="">Option 1</option> <option value="">Option 2</option> <option value="">Option 3</option> <option value="">Option 4</option> <option value="">Option 5</option> <option value="">Option 6</option> </select>

07/03/2007, 22h56
yousky

Merci à tous de vos réponses,

Alors il est vrai que je préfère avoir une combobox qui se déroule lorsque je clique dessus et qui affiche donc une liste de choix avec des checkbox.

bigboomshakala j'étais justement sur ce principe, qui fonctionne bien sous Firefox mais lorsque je le teste sous IE le DIV que j'affiche lorsque je clique sur ma combo s'affiche en dessous d'une autre liste déroulante se trouvant en dessous de ma page :-(
Exemple ici hxxp://yousky.free.fr/test/test.htm

Quelqu'un aurait-il une solution, je ne suis pas du tout spécialise des feuilles de styles :-(

Merci à vous
07/03/2007, 23h25
bigboomshakala

hello,

c'est un bug connu de IE<=6 corrigé dans IE7. il y a moyen de contourner cela avec les iframe. j'ai utilisé cette méthode la semaine dernière pour implémenter une liste déroulante avec non pas des checkbox mais une arborescence cliquable.

:aie: je n'ai pas mes sources chez moi (c'est au taf). si j'oublie demain ou si tu trouves avant fais moi signe
07/03/2007, 23h36
Auteur

Tu peux essayer de jouer avec les z-index, mais ça m'étonnerai que ça marche.
Sinon tu peux essayer le truc proposé dans la FAQ Javascript

:oops: la honte sur moi, j'ai zappé la faq (lapidez moi) :mrgreen:

sinon j'ai remis la main sur une autre technique sans javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
	<head>
		<meta http-equiv=content-type content="text/html; charset=utf-8">
		<style>
			.divTop
			{
				position:absolute;
				overflow:hidden;
				border:solid 1px #0055AÀ;
				padding:12px;
				top:45px;
				width:22em;
				background:#333333;
			}
			.divTop iframe
			{
				position:absolute;
				top:0;
				left:0;
				display:block;
				z-index:-1;
				filter:mask();
				width:3000px;
				height:3000px;
			}
		</style>
	</head>
	<body>
		<div class="divTop">
			<h2>Résolution du bug d affichage des div sous IE 6 et précédents</h2>
			<iframe></iframe>
		</div>
		<br><br><br><br><br><br>
		<select>
			<option>coucou, je suis sous la div</option>
		</select>
	</body>
</html>

07/03/2007, 23h46
bigboomshakala

8O bon, je viens de tester le script de la faq.
sous IE effectivement ça marche, MAIS...
sous Firefox c'est très moche

:king: je te conseille la technique css que j'ai posté. là je suis sûr que le rendu est ok partout

EDIT : rectification :arrow: le script de la faq n'est pas complet, il faut ajouter

Code:

border = "0";

dans le "with" qui paramètre l'IFRAME afin d'éviter que la bordure de l'iframe ne dépasse de sous la div sous firefox !!

avec cette correction l'affichage est correct sur les 2 navigateurs
07/03/2007, 23h57
Auteur

bigboomshakala, j'ai testé le code CSS que tu as posté avec IE5 et Firefox.

Avec IE5, le select est bien sous le div (on le voit à peine).
Avec Firefox, rien, pas de select, le résultat est moche.
08/03/2007, 00h02
bigboomshakala

le select est sous la div... la div n'a pas la meme taille sous IE et FIrefox (les 2 navigateur n'ont pas le meme rendu). donc c'est normal, ça dépend des styles employés.

il suffit d'extraire de mon exemple ce qui est utile et ensuite de s'occuper d'avoir un rendu similaire sur les 2 nav

:?
08/03/2007, 00h14
Auteur

Citation:

Envoyé par bigboomshakala

le select est sous la div... la div n'a pas la meme taille sous IE et FIrefox (les 2 navigateur n'ont pas le meme rendu). donc c'est normal, ça dépend des styles employés.

Certes mais pourquoi sous IE le commentaire "Résolution du bug d affichage des div sous IE 6 et précédents" est invisible ? Le div a un fond blanc (ou transparent), et non fond dont la couleur est définie dans la CSS #333333. Ce n'est pas à cause du filter: mask, ni du z-index négatif.

A propos du z-index, je ne suis pas sûr IE "supporte" des valeurs négatives.

Par contre, je n'ai pas fait attention à la taille de la frame : w=3000px et h=3000px 8O
08/03/2007, 00h30
yousky

Yes :) j'ai enfin résolu mon problème.
Alors en parcourant tous vos codes, j'ai vu à un moment donné une balise vide <iframe></iframe> dans un DIV, sans cette balise IFrame point de salut, cela ne fonctionnait plus.

J'ai donc 'tout simplement' ajouté cette balise au bon endroit dans mon exemple et IMPECCABLE sous IE et Firefox, mon div passe désormais au dessus du select.
Me demandez pas pkoi :) j'en sais pas + lol

Merci encore à vous, et de votre rapidité, je vous mets à dispo les sources de ma page test (utilisé test.htm, le reste c'est du rush).

hxxp://yousky.free.fr/testCSS.zip

Ciao ciao
Yousky
08/03/2007, 00h39
bigboomshakala

Citation:

Envoyé par Auteur

Certes mais pourquoi sous IE le commentaire "Résolution du bug d affichage des div sous IE 6 et précédents" est invisible ? Le div a un fond blanc (ou transparent)

8O pas chez oim
08/03/2007, 09h27
SpaceFrog

sinon il faut faire ton select toi même avec un ul et des checks dans les li ...