Liste déroulante en couleur
Résolu
LaChaux78
Messages postés
583
Date d'inscription
Statut
Membre
Dernière intervention
-
LaChaux78 Messages postés 583 Date d'inscription Statut Membre Dernière intervention -
LaChaux78 Messages postés 583 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai une liste déroulante avec 3 items et j'aimerai mettre une couleur differente pour chaque item sélectionnés. Je me demandais si cela était possible.
Actuellement j'ai un style pour le fond de chaque items mais lorsque j'ai sélectionné 1 tem de la liste j'aimerai garder la même couleur de fond.
Merci pour votre aide.
J'ai une liste déroulante avec 3 items et j'aimerai mettre une couleur differente pour chaque item sélectionnés. Je me demandais si cela était possible.
Actuellement j'ai un style pour le fond de chaque items mais lorsque j'ai sélectionné 1 tem de la liste j'aimerai garder la même couleur de fond.
Merci pour votre aide.
<select name='reponse[]' size='1' value='$r->idpers'> <option style='background-color:#FF8000;' value='saispas'>Je ne sais pas encore</option> <option style='background-color:#04B404;' value='present'>Présent</option> <option style='background-color:#FF0000;' value='absent'>Absent</option></select>
A voir également:
- Liste déroulante en couleur
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste déroulante google sheet - Accueil - Guide bureautique
- Excel cellule couleur si condition texte - Guide
- Boite a couleur - Télécharger - Divers Photo & Graphisme
1 réponse
Bonjour.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>liste item couleur</title>
<style>
.orange{ background-color:#FF8000;}
.vert{ background-color:#04B404;}
.rouge{ background-color:#FF0000;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( function() {
$("body").on( "change", "#monChoix", function(){
var selectVal = $(this).val();
var couleur = $( 'option[value="'+selectVal+'"]' ).attr("class") ;
$("#monChoix").attr("class", couleur);
})
// recupere la valeur choisi
var selectVal = $("#monChoix").val();
// recupere la couleur de l'option qui a cette valeur
var couleur = $( 'option[value="'+selectVal+'"]' ).attr("class");
// change la couleur de la valeur choisi
$("#monChoix").attr("class", couleur);
});
</script>
</head>
<body>
<select id="monChoix" name='reponse[]' size='1' value='<?php echo $r->idpers ?>'>
<option class="vert" value="present">Présent</option>
<option class="rouge" value="absent">Absent</option>
<option class="orange" value="saispas" selected>Je ne sais pas encore</option>
</select>
</body>
</html>
Je vous dit merci tout fonctionne bien.
Avec mes excuses pour ce retard.
Cordialement