Recherche SelectBox avec Checkbox pour multiselection

**yousky** · 04/03/2007, 01h31

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

**bigboomshakala** · 05/03/2007, 14h55

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

**dehian** · 05/03/2007, 15h02

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

**Auteur** · 05/03/2007, 17h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**yousky** · 07/03/2007, 22h56

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

**bigboomshakala** · 07/03/2007, 23h25

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.

je n'ai pas mes sources chez moi (c'est au taf). si j'oublie demain ou si tu trouves avant fais moi signe

**Auteur** · 07/03/2007, 23h36

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

**bigboomshakala** · 07/03/2007, 23h40

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**bigboomshakala** · 07/03/2007, 23h46

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

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

EDIT : rectification

le script de la faq n'est pas complet, il faut ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Auteur** · 07/03/2007, 23h57

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.

**bigboomshakala** · 08/03/2007, 00h02

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

**Auteur** · 08/03/2007, 00h14

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

**yousky** · 08/03/2007, 00h30

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

**bigboomshakala** · 08/03/2007, 00h39

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)

pas chez oim

**SpaceFrog** · 08/03/2007, 09h27

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

Recherche SelectBox avec Checkbox pour multiselection

JavaScript

Discussions similaires

Partager

Partager