[PHP 5.2] Liste déroulante à 2 colonnes [Résolu]

[Zhebulon]

Bonjour à tous...

J'ai réussi à faire une liste déroulante à deux colonnes, le problème est que je voudrais que la 2ème colonne s'aligne sur la première lettre des items qu'elle contient avec une ligne séparative verticale entre les deux colonnes et les espaces nécessaires entre la dernière lettre des items contenus dans la première colonne et le trait séparateur. Est-ce possible et y a t'il un moyen de coder celà proprement ?
Je voudrais en gros faire pareil que les listes déroulantes d'Access.

Voilà mon code initial :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?php
					$sql="SELECT N0_Departement, lib_departement, Code_departement FROM departement ORDER BY lib_departement";
					$resultat=mysql_query($sql);
					echo '<select name="Dep">';
					echo '<option value="" selected></option>';
					while ($rang=mysql_fetch_array($resultat)){
						$cleDep=$rang['N0_Departement'];
						$ldep=$rang['lib_departement'];
						$Ndep=$rang['Code_departement'];
						if (!empty($ldep)){
							echo "<option value=\"$cleDep\">$ldep, $Ndep</option>";
						}
					}
					echo '</select>';
				?>

Merci beaucoup d'avance.

[Benjamin Delespierre]

Tu peux montrer un screenshot parce que là

je voudrais que la 2ème colonne s'aligne sur la première lettre des items qu'elle contient avec une ligne séparative verticale entre les deux colonnes et les espaces nécessaires entre la dernière lettre des items contenus dans la première colonne et le trait séparateur

J'ai rien compris...

[Zhebulon]

Bonjour Benjamin...

OK, voilà avec le code que j'ai donné ci-dessus, ce que j'obtiens :

Et en fait, voilà ce que je voudrais obtenir :


Bon, dans l'exemple, il y a 3 colonnes, je n'en veux que deux. Au lieu que mes items de colonnes soient tassés, je voudrais qu'ils soient espacés comme l'exemple ci-dessus avec une ligne verticale qui sépare ou démarque les colonnes....

[Benjamin Delespierre]

D'accord. Je ne te cache pas que ça ne vas pas être simple. Enfin, c'est pas impossible tout de même.
La solution que je te recommande est d'afficher un tableau (au lieu d'une liste) formatté comme tu veux et dont le tbody possède une hauteur fixe. Avec CSS tu t'arranges pour faire apparaître l'ascenseur vertical à l'aide de la propriété overflow. Ensuite, avec JavaScript (je te recommande jQuery pour te simplifier la vie) tu vas attraper l'évènement clic sur une ligne du tableau et mettre à jour un champ caché dans la page qui sera l'équivalent de ton ancienne liste déroulante. Tu pourra en profiter pour mettre en surbrillance la ligne de tableau concernée.

Avec ça c'est gagné

[Zhebulon]

Bonjour Benjamin...

Ouille, tu l'as dit, c'est pas simple tout de même. Je pourrais plancher là-dessus quand j'aurais plus de temps devant moi ce qui, actuellement n'est pas le cas. Mais ton idée est intéressante, en plus je n'ai jamais fait de JQuery, quant à CSS, je débute timidement, ce sera l'occasion.

Mon idée plus simpliste revenait à récupérer la longueur maxi du champ contenu dans le première colonne de la liste, pour chaque item de la liste récupérer sa longueur réelle et reconstituer la chaîne avec les espaces manquants et ensuite rajouter le code ASCII de la barre verticale, puis charger la seconde colonne.

Farfelu ?

[Benjamin Delespierre]

Mon idée plus simpliste revenait à récupérer la longueur maxi du champ contenu dans le première colonne de la liste, pour chaque item de la liste récupérer sa longueur réelle et reconstituer la chaîne avec les espaces manquants et ensuite rajouter le code ASCII de la barre verticale, puis charger la seconde colonne.

Farfelu ?

Oui, et très très sale en plus.

[Zhebulon]

ARG ! Ben si tu le dis alors.... J'essaierais donc ta solution....

Merci beaucoup à toi !

[Benjamin Delespierre]

Je te conseille de laisser ton select intact et de les transformer (à l'évent onload) avec Javascript, tu sera mieux indexé par les moteurs de recherches en utilisant cette technique.