Couleurs des éléments SELECT après submit

Version imprimable

26/09/2010, 10h37
zorbo

Couleurs des éléments SELECT après submit

Bonjour,

J'ai une petite question qui me cause perplexité:

J'ai une page de recherche avancée depuis laquelle l'on peut lancer une requête d'après critères multiples (10 menus à select simple ) sur une base d'articles en choisissant un ou plusieurs critères.
J'ai, grâce à une fonction php, fixé les termes de la recherche en laissant sélectionnés les critères choisis APRÈS soumission du formulaire (echo selected).
La stratégie est plutôt bonne car on sait donc que la liste d'articles proposés en dessous correspond aux critères sélectionnés au dessus, cela permet d'affiner son choix encore un peu plus précisément.
Mais je voudrais aller encore un peu plus loin en COLORANT les éléments sélectionnés dans les menus et seulement ceux-là, afin de mieux les repérer visuellement.

Je me suis creusé la tête, pas assez sans doute, pour adapter une fonction JS avec des CSS mais dés soumission du formulaire, les attributs de classe disparaissent.
Y-a-t-il une solution avec le couple JS + CSS ?
26/09/2010, 10h47
SpaceFrog
php css suffit ...

css
Code:

1 2 3 <style type='text/css'> .selected {background-color:red;} </style>
construction des options avec php

Code:

echo '<option value="'.$value.'" '.(($value==$_POST['sel'])?'class="selected" ':'').'>aa</option>';

Merci de votre réponse,

J'ai cependant un petit souci de positionnement de cette balise class.
Voici comment je procède:

Les menus déroulants (une dizaine) se présentent ainsi:

Code:

1
2
3
4
5
6
7
 
<select name="port" id="select"CLASS="champe" onChange="this.form.submit()">
                      <option value="%"<?php echo choixParDefaut7('%'); ?>>Indiff&eacute;rent</option>
                      <option value="Droit"<?php echo choixParDefaut7('Droit'); ?>>Droit</option>
                      <option value="Touffu et retombant"<?php echo choixParDefaut7('Touffu et retombant'); ?>>Touffu et retombant</option>
                      <option value="Dense"<?php echo choixParDefaut7('Dense'); ?>>Dense</option>
                    </select>

Afin de garder la selection après submit, j'ai adapté le code suivant:

Code:

1
2
3
4
5
6
7
8
9
 
<?php
function choixParDefaut7($port) // début fonction port
{ $par_defaut7 = ''; 
    if (isset($_POST['port'])) 
   {if ($_POST['port'] == $port)         {
   $par_defaut7='selected="selected"';  }    }
return $par_defaut7; }
?>

Je ne sais donc pas ou placer cette classe.

mon code est pourtant explicite ... le class est dans l'option

en gros le code généré donne
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <style type='text/css'> .selected {background-color:red;} </style> </head> <body> <select> <option>aa</option> <option >aa</option> <option class="selected" >aa</option> <option >aa</option> <option>aa</option> <option >aa</option> </select>
il faudrait par la même occasion attribuer un selected sur l'option selectionnée

26/09/2010, 13h02
zorbo

Oui, en effet, le menu se déroule coloré mais cette option de couleur disparait aussitôt après submit.
26/09/2010, 13h14
SpaceFrog

oui :roll: normal ...
d'ou la nécessité d'attribuer le class en php coté serveur comme montré dans le code précédent en testant l'egalité entre le value de l'option et la valeur postée ...

Oui d'accord pour l'integrer côté serveur mais où ?
J'ai essayé en obtenant une erreur de syntaxe (au mieux)

Code:

1
2
3
4
5
6
7
 
function choixParDefaut7($port) // début fonction port
{ $par_defaut7 = ''; 
    if (isset($_POST['port'])) 
   {if ($_POST['port'] == $port)         {
   $par_defaut7='selected="selected"';  }    }
return $par_defaut7; }

26/09/2010, 20h33
SpaceFrog

au moment de la création pas php du code html de l'option comme montré ci dessus

Code:

echo '<option value="'.$value.'" '.(($value==$_POST['sel'])?'class="selected" ':'').'>aa</option>';

avec sel = name du select
et $value = valeur de l'option

Bonjour,

Pardon, je ne suis pas très assidu et je vous remercie pour ces réponses.

Après quelques remises en forme syntaxique, je suis arrivé au code suivant qui concatène à la fois la classe et selected=selected, côté serveur.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <style type="text/css">  </style> </head> <body> <form name="form1" method="post" action="essai.php"> <select name="port" id="select"CLASS="champe" onChange="this.form.submit()"> <?php echo '<option value="'.Droit.'" '.((Droit==$_POST['port'])?'class="selected" ':'').choixParDefaut7('Droit').'>Droit</option>';?> <?php echo '<option value="'.Dense.'" '.((Dense==$_POST['port'])?'class="selected" ':'').choixParDefaut7('Dense').'>Dense</option>';?> </select> <?php function choixParDefaut7($port) { $par_defaut7 = ''; if (isset($_POST['port'])) {if ($_POST['port'] == $port) { $par_defaut7='selected="selected"'; } } return $par_defaut7; } ?> </form>
La valeur retournée a bien l'attribut de classe .selected et elle reste selectionnée après submit, MAIS cette valeur reste toujours de couleur noire alors qu'elle est bien rouge en redéroulant le menu !

28/09/2010, 08h29
SpaceFrog

normal c'est l'état selected qui mets en surbrillance et surbrillance sur du rouge c'est noir ...
28/09/2010, 09h38
zorbo

Je viens de retourner les echos php afin de faire en sorte d'affecter la classe .selected APRES selected=selected, mais les effets sont les mêmes, je tourne un peu en rond.
28/09/2010, 09h59
SpaceFrog

tu ne peux pas aller à l'encontre des styles par defaut du navigateur sauf à émuler toi même le select e)avec un ul et des lis ...
28/09/2010, 11h48
zorbo

Oui, en effet, je viens d'ailleurs de voir que IE affiche le select en rouge après selection, mais il n'est pas gras, contrairement aux attributs du style en question.
Firefox, pas question. Après repérage dans ses styles par défaut (forms.css), les attributs du select sont clairement énoncés, mais comment faire pour les rapatrier dans un style ul.

Mais est-ce une fin de non-recevoir sachant que l'émulation risquerait de ne pas fonctionner sur l'un ou l'autre navigateur ?
28/09/2010, 11h51
SpaceFrog

passe par jquery ... il existe des addons pur emuler des selects qui sont très personalisables ... et tu aurais moins de surprises de compatibilité.
29/09/2010, 08h27
zorbo

Oui, je pourrais faire avec Jquery, j'ai vu que les modules sont nombreux et il y en surement un qui me va.
Merci de tes réponses et du temps passé à cette réflexion.