le MEMO du WEB développeur
••• JQuery •••  Liste des Mémos, astuces et bonnes pratiques

Plugin JQuery Select Box / Drop-Down / Liste déroulante. Un joli select

Une jolie liste déroulante avec couleurs personnalisables

Une jolie liste déroulante avec texte différent item dans la liste/item sélectionné

Une jolie liste déroulante avec événement sur changement d'item sélectionné

Le Plugin JQuery joliSelect permet de métamorphoser vos vieux objet select HTML, en les rendant un peu plus fun, un peu plus colorés un peu plus agréables à regarder et à utiliser !

Les + du plugin joliSelect pour personnaliser ses objets SELECT

  • Choix des couleurs d'affichage de la liste déroulante.
  • Mise en surimpression de l'élément choisi dans la liste.
  • Autocomplete qui permet de retrouver facilement un élément de la liste en tapant ses premières lettres.
  • Choix de la hauteur maximal de déploiement de la liste déroulante.
  • Choix du texte à écrire si aucune pré-sélection
  • Possibilité d'afficher un texte différent entre l'item dans la liste et l'item sélectionné (voir Select des légumes)
  • Sauvegarde des attributs id et name et selected de vos objets Select

Mode d'emploi du plugin jQuery joliSelect

Le plugin joliSelect reprend les informations de vos listes déroulantes HTML, nul besoin de modifier votre code, il suffit d'appliquer la méthode joliSelect() à votre objet HTML select.

  • Déclaration du select HTML classique : <select="id_select'><option> </option> ... </select>
  • Application du plugin joliSelect au select : $('#id_select').joliSelect ({  });
  • Récupèration de la valeur et du texte de l'item sélectionné en sortie de formulaire.

Téléchargez le code source du Plugin JQuery sur GitHub

Déclaration de l'objet SELECT à skinner

Le plugin joliSelect peut être appliqué sur vos vieilles listes déroulantes, la déclaration est inchangée.

Texte paramétrable : A ce niveau, vous pouvez choisir de différencier le texte à afficher pour un item dans la liste déroulante, du texte à afficher lorsque l'item est sélectionné.

Pour cela il suffit de séparer le texte à afficher dans la liste, du texte à affiché par une chaine-clé, la chaine-clé par défaut étant '**' (cahîne paramétrable)
<option>Texte à afficher dans la liste**Texte à afficher quand sélectionné</option>

<form method="POST" action="">
   <select id="combo_fruit" >
     <option value="1" >Orange</option>
     <option value="2" selected="selected">Banane</option>
     <option value="3">Pomme</option>
     <option value="4">Poire</option>
     <option value="5">Kiwi</option>
     <option value="6">Fraise</option>
     <option value="7">Ananas</option>
     <option value="8">Mangue</option>
     <option value="9">Framboise</option>
   </select>
   <br/>
   <!-- Séparateur par défaut '**' sépare le texte à afficher dans la liste et le texte à afficher quand l'item est sélectionné -->
   <select id="combo_legume" >
     <option value="1" >Poireaux**Les poireaux !!</option>
     <option value="2">Petits pois**Les petits pois !!</option>
     <option value="3">Asperges**Les asperges !!</option>
     <option value="4">Concombre**le concombre !!</option>
     <option value="5">Poivron**Le poivron !!</option>
     <option value="6">Oignon**L'oignon !!</option>    
   </select>
   <br/>
   <select id="combo_fleur" >
     <option>Gentiane</option>
     <option>Pâquerette</option>
     <option>Bleuet</option>
     <option>Violette</option>
     <option selected="selected">Muguet</option>
     <option>Lys</option>  
   </select>
</form>

Application du plugin joliSelect

Affectation du plugin joliSelect aux éléments SELECT déclarés dans le code HTML ci dessus.

<script type="text/javascript">
  $(document).ready( function () {
    $('#combo_fruit').joliSelect(
   {
    'width': '120'
   });
  
   $('#combo_legume').joliSelect(
   {
    'width'          : '160',
    'bkdColor'       : '#caec7c',
    'bkdColorSelect' : '#b3e251',
    'arrowColor'     : '#b3e251',
    'fontColor'      : '#4e6d16',
    'maxHeight'      : '200',
    'defaultText'    : 'Choisir un légume'
   });
  
   $('#combo_fleur').joliSelect(
   {
    'width'          : '200',
    'bkdColor'       : '#e0c1c1',
    'bkdColorSelect' : '#e09188',
    'arrowColor'     : '#e09188',
    'fontColor'      : '#914f53',
    'maxHeight'      : '200',
    'onChooseItem':  function()
      {
        alert ('Evenement sur changement d\'item! ');
      }
   });
  })
</script>

Récupération de la valeur et du texte de l'item sélectionné après soumission du formulaire

Les attributs id et name de votre objet select sont sauvegardés, La procedure de récupération de la valeur de l'item sélectionnée après soumission du formulaire est inchangée : $_REQUEST['name_select'

Le texte de l'item séléectionné quant à lui sera récupéré en ajoutant l'identifiant de votre élément SELECT à la fin du mot clés joli_txt_ ,  soit : $_REQUEST['joli_txt_id_selec']

<?php
echo $_REQUEST["joli_txt_combo_fruit"].' (Value='.$_REQUEST["combo_fruit"].')';
echo $_REQUEST["joli_txt_combo_legume"].' (Value='.$_REQUEST["combo_legume"].')';
echo $_REQUEST["joli_txt_combo_fleur"].' (Value='.$_REQUEST["combo_fleur"].')';
?>

 

Scripts indispensables au fonctionnement de joliSelect

<!-- Déclaration de JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Déclaration de JQuery UI (scripts et CSS) pour le plugin autocomplete -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<​link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<!-- Déclaration du script et CSS du plugin joliSelect  -->
<script  src="js/joliSelect.js"></script>
<link rel="stylesheet"  href="js/joliSelect.css"/>

Téléchargez le code source du Plugin JQuery sur GitHub

Plugin tout jeune (août 2013) et encore en phase de test. 
Bien vérifier donc avant toute utilisation !

INCOMPATIBLE IE7

publié le 07/08/2013 par Memo Web
Formulaires
Commenter le Mémo :

Problème évenement click sous IE
StopPropagation() ou Empêcher un évenement de se propager aux parents de l'élément
Siblings() Parcours des frères immédiats d'un élément
Jquery récupérer les valeurs de checkbox, select et radio
Afficher une image différente selon la date de l'année en javascript
Atteindre une ancre avec JQuery
DatePicker de JQuery : Déployer le calendrier à l'ouverture de la page
Modifier l'attribut src d'une image avec JQuery
$("#calendar").fullCalendar is not a function
Connaitre le nombre d'éléments possédant une classe définie
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos