tableau PHP dans list deroulante

[escalibur2b]

Bonjour,

J'ai actuellement une liste de données recupérées dans ma base de données, sous forme de liste déroulante, mais le nom et le prix des articles sont collées l'un à l'autre.

C'est pour ça que je sollicite votre aide pour pouvoir me dire comment faire un tableau pour mettre la denomination à gauche et le prix à droite.

Voici un bout du code

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
 
 <tr>
        <td width="60%" style="font-size:12px">
   &bull; Carte graphique :
   		</td>
        <td width="40%">  <select name="listbox_cg" style="width:600px;"> 
             	<option name="cg" value="cg" >Aucun(e)</option>
 
                    <?php
 
 
					$req = "select distinct * from products p, products_description pd, products_to_categories p2c, categories_description cd where p.products_status = '1' and p.products_id = pd.products_id and p.products_id = p2c.products_id and p2c.categories_id = cd.categories_id and cd.categories_id LIKE '1071' order by p.products_price ASC ";
      	               $sql = mysql_query($req);
                          while ($data = mysql_fetch_assoc($sql)) 
                            {
                                $nom_cg = $data['products_name'];
								$prix_cg = round($data['products_price'] * 1.196, 2);
                                $id_cg = $data['products_id'];
 
                                echo "<option value=$id_cg> ".($nom_cg)." - ".($prix_cg)." €</option>";
 
							}		                   
                      ?>                         
               </select>
           </td>
           </tr>

Merci par avance

[provirus]

Bonjour,

Si je comprends bien, présentement, les items de la liste déroulante ressemblent à:

Code :

1
2
Pomme - 10$
Sot - 5$

et vous voudriez plutôt avoir:

Code :

1
2
Pomme - 10$
Sot   -  5$

Si c'est le cas, ce n'est pas possible de mettre un tableau dans une liste déroulante. Plusieurs choix de remplacements s'offrent à vous.

1. Vous pourriez continuer d'utiliser la liste déroulante et utiliser str-pad() pour ajouter des espaces au nom et au prix (séparément). Je ne crois pas que mettre un espace fonctionnerait (puisque les navigateurs n'en gardent qu'un), mais il y a un caractère spécial pour faire des espaces dans un document html.

2. Vous pourriez remplacer la liste déroulante par un popup javascript qui affiche un tableau

[gwharl]

Je ne suis pas sur d'avoir bien compris ta question.

Est-ce comme provirus l'a dit, tu souhaite appliquer un tableau dans ta liste déroulante ?

Veux-tu afficher un tableau en dehors ?

[escalibur2b]

Bonjour,

Je souhaiterais appliquer un tableau dans le menu déroulant pour mettre un peu d'ordre dans tout ça.

Merci pour votre aide

[kodeya]

Si c'est la mise en page qui t'intéresses je reprend provirus

Envoyé par provirus

Bonjour,

Si je comprends bien, présentement, les items de la liste déroulante ressemblent à:

Code :

et vous voudriez plutôt avoir:

Code :

Si c'est le cas, ce n'est pas possible de mettre un tableau dans une liste déroulante. Plusieurs choix de remplacements s'offrent à vous.

1. Vous pourriez continuer d'utiliser la liste déroulante et utiliser str-pad() pour ajouter des espaces au nom et au prix (séparément). Je ne crois pas que mettre un espace fonctionnerait (puisque les navigateurs n'en gardent qu'un), mais il y a un caractère spécial pour faire des espaces dans un document html.

Effectivement les espaces blancs sont ignorés dans <option>. IL faut utiliser

Code :

 

) à la place :

Code :

1
2
3
 
Pomme   - 10$
Sot     -  5$

Il faut penser à la taille du nom du produit qui peut aller de 2 à je ne sais pas trop combien de caractères et au prix

[escalibur2b]

Bonjour Kodeya,

Etant donné qu'il est impossible de faire un tableau dans un menu déroulant, puis-je au moins demander à ce que le prix soit aligné à droite du menu déroulant?

Merci par avance.

[kodeya]

Tu peux faire ça avec css :

Code :

1
2
 
<style type="text/css">select option{text-align:right}</style>

[escalibur2b]

C'est encore celui qui comprends rien lol,

j'ai essayé, mais cela me fait des erreurs dans le fichiers.

[kodeya]

C'est quoi comme erreur ?
Pour info , la balise <style> c'est du html et pas du php

[escalibur2b]

J'ai mis la balise style dans le html, mais il me bug tout le fichier actuel.



sinon il me met erreur ligne 632, et basta.

[kodeya]

j'ai un peu du mal à imaginer ce qu'il y a à la ligne 632 du code que j'ai jamais vu
sinon regarde le fichier des erreurs php. Peut être tu trouveras la description de l'erreur là bas.

[escalibur2b]

Voici un bout de code pour que tu te fasse une idée.

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
 
<tr>
        <td width="60%" style="font-size:12px">
   &bull; Carte graphique :
   		</td>
        <td width="40%">  <select name="listbox_cg" style="width:600px;"> 
             	<option name="cg" value="cg" >Aucun(e)</option>
 
                    <?php
 
 
					$req = "select distinct * from products p, products_description pd, products_to_categories p2c, categories_description cd where p.products_status = '1' and p.products_id = pd.products_id and p.products_id = p2c.products_id and p2c.categories_id = cd.categories_id and cd.categories_id LIKE '1071' order by p.products_price ASC ";
      	               $sql = mysql_query($req);
                          while ($data = mysql_fetch_assoc($sql)) 
                            {
                                $nom_cg = $data['products_name'];
								$prix_cg = round($data['products_price'] * 1.196, 2);
                                $id_cg = $data['products_id'];
 
                                echo "<option value=$id_cg> ".($nom_cg)." - ".($prix_cg)." €</option></style>";
 
							}		                   
                      ?>                         
               </select>
           </td>
           </tr>

La ligne 632 equivaut à la ligne 20 ici

[kodeya]

Il n'y a pas d'erreur php dans ce bout du code. Par contre:

Code :

echo "<option value=$id_cg> ".($nom_cg)." - ".($prix_cg)." €</option></style>";

ce "</style>" apres </option> m'intrigue. C'est pourquoi faire ?


PS
Il est très simple de vérifier si un script php contiens des erreurs PHP en faisant en ligne de commande dans cmd :

Code :

php -l C:\wamp\chemin\vers\script.php

l comme dans lolo

[escalibur2b]

le </style> ne sert à rien, je l'ai supprimer

il s'est mis automatiquement

[escalibur2b]

apres le test que tu m'a donné, il n'y a aucune erreur de syntaxe php.

[kodeya]

Si il n'y a pas d'erreurs php mais le navigateur t'affiche toujours l'erreur c'est peut être le cache du navigateur tout simplement. Fait Ctrl+F5 sur cette page

[jreaux62]

Bonjour,
1/ dans ton code, écris plutot :

Code :

echo '<option value="'.$id_cg.'">'.$nom_cg.' - '.$prix_cg.' €</option>';

ou MIEUX (ca évite de mélanger code php et code html) :

Code :

1
2
3
4
5
<?php // .......
?>
<option value="<?php echo $id_cg; ?>"><?php echo $nom_cg.' - '.$prix_cg; ?> €</option>
<?php // .......
?>

2/ ... Vous n'avez pas l'impression de vous éloigner de la question initiale ? ...

La question était (en clair) : peut-on formater le contenu d'une balise <option> ?
(pour avoir un bout de texte à gauche et un autre à droite)

La réponse est non.
- en CSS, non, car les différents navigateurs ne l'interprètent pas de la même façon ...)
- avec des espace &nbsp; non plus, car les lettres ont des espacements différents (ex. "i" et "m" ...)

Cela dit, ici, il existe ici 2 solutions :
a/ la facile :
comme le prix peut etre formater (de la forme : xxx,xx €) -> voir number_format ()
=> il suffit simplement de mettre le prix AVANT !

b/ la (plus) compliquée :
remplacer le <select>...<option> ... par un système <div><ul><li>... afin de SIMULER la liste déroulante.
(par contre, je ne retrouve plus le lien vers un exemple que j'avais vu ..)

[gwharl]

Code :

1
2
3
4
5
6
7
<div id="menu">
    <ul>
	<li><a href="#">lien1</a></li>
	<li><a href="#">lien2</a></li>
	<li><a href="#">lien3</a></li>
    </ul>
</div>

De ce style.

[jreaux62]

J'ai retrouvé le lien !
=> Personnalisation d'un formulaire XHTML en Javascript et CSS => "IV. Le select"
(finalement pas si compliqué !)

Les lignes auront donc cette forme :

Code :

1
2
3
4
5
6
<li>
	<a href="javascript:void(0)" onclick="validAndHide('<?php echo $id_cg; ?>', this, 'blabla', 'select1')">
	<span style="float:left;"><?php echo $nom_cg; ?></span>
	<span style="float:right;"><?php echo $prix_cg; ?> €</span>
	</a>
</li>

[escalibur2b]

Bonsoir,

Merci a Kodeya, Jreaux62, Gwharl pour l'attention que vous avez porté à mon problème.

Le code de Gwarl n'est pas réalisable a cause de mes variables. Je peux trezs bien avoir 3 lignes comme 108 lignes.

Je vais suivre l'idée de Jreaux62, mettre le prix en premier, ça sera beaucoup plus simple.

Encore une question, peut t-on demandé que le texte aille à la ligne quand il ets plus long que le menu deroulant, et peut-on mettre le prix en couleur et en gras?

Merci par avance.