Couleurs des éléments SELECT après submit

**zorbo** · 26/09/2010, 10h37

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 ?

**SpaceFrog** · 26/09/2010, 10h47

php css suffit ...

css

Code :

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

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

construction des options avec php

Code :

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

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

**zorbo** · 26/09/2010, 11h53

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 :

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

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 :

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

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.

**SpaceFrog** · 26/09/2010, 12h05

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

en gros le code généré donne

Code :

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

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

**zorbo** · 26/09/2010, 13h02

Oui, en effet, le menu se déroule coloré mais cette option de couleur disparait aussitôt après submit.

**SpaceFrog** · 26/09/2010, 13h14

oui

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 ...

**zorbo** · 26/09/2010, 19h00

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

Code :

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

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; }

**SpaceFrog** · 26/09/2010, 20h33

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

Code :

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

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

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

**zorbo** · 27/09/2010, 19h59

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 :

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
 
<style type="text/css">
<!--
.selected {color: #8A0A07;  font-size: 16px; font-weight: bold;}
-->
</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 !

**SpaceFrog** · 28/09/2010, 08h29

normal c'est l'état selected qui mets en surbrillance et surbrillance sur du rouge c'est noir ...

**zorbo** · 28/09/2010, 09h38

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.

**SpaceFrog** · 28/09/2010, 09h59

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 ...

**zorbo** · 28/09/2010, 11h48

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 ?

**SpaceFrog** · 28/09/2010, 11h51

passe par jquery ... il existe des addons pur emuler des selects qui sont très personalisables ... et tu aurais moins de surprises de compatibilité.

**zorbo** · 29/09/2010, 08h27

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.

Couleurs des éléments SELECT après submit

JavaScript

Discussions similaires

Partager

Partager