Bibliothèque de controles

1) Saisie d'une surface :

2) Saisie d'une surface (avec pré-selection) :

3) Saisie d'un budget :

4) Type de biens :

5) Nombre de pièces :

Voici un plugin jQuery facilitant la création de listes déroulantes 'customisées'.

Les scripts + les images

customListBox_V1.0.0.zip

Exemple

$(document).ready(function(){
   $('#customListBox').clickMenu({ 
       minValues:'||150000|200000|250000|350000|500000', maxValues:'|100000|150000|200000|250000|350000', 
       minCustomText:'Plus de {0} €', maxCustomText:'Moins de {0} €', minMaxCustomText:'De {0} à {1} €', 
       onClick:onClick_budget 
   });
});

 <ul class="customListBox" id="customListBox">
  <li>
   <p>Votre budget</p>
    <ul class="clb_options" >
     <li>
      <a href="#">Votre budget</a>      
     </li>
     <li>
      <a href="#">Moins de 100000 €</a>
     </li>
     <li>
      <a href="#">De 100000 à 150000 €</a>
     </li>
     <li>
      <a href="#">De 150000 à 200000 €</a>
     </li>
     <li>
      <a href="#">De 200000 à 250000 €</a>
     </li>
     <li>
      <a href="#">De 250000 à 350000 €</a>
     </li>
     <li>
      <a href="#">De 350000 à 500000 €</a>
     </li>
     <li>
      <a href="#">Plus de 500000 €</a>
     </li>
     <li class="clb_inputs" >
      <a href="#">De <input type="text"> à <input type="text"> €</a>
     </li>
    </ul>
  </li>
 </ul>

Les options

#customListBox : id de l'élément 'input'
minValues : tableau des valeurs minimales
maxValues : tableau des valeurs maximales
minCustomText : texte affiché lors de la sélection d'un élément ayant uniquement une valeur min
maxCustomText : texte affiché lors de la sélection d'un élément ayant uniquement une valeur max
minMaxCustomText : texte affiché lors de la sélection d'un élément ayant uniquement une valeur min et une valeur max
minInputId : attribut 'id' de l'élément INPUT type='hidden' dans lequel est stocké la valeur min de l'élément sélectionné
maxInputId : attribut 'id' de l'élément INPUT type='hidden' dans lequel est stocké la valeur max de l'élément sélectionné
minInputName : attribut 'name' de l'élément INPUT type='hidden' dans lequel est stocké la valeur min de l'élément sélectionné
maxInputName : attribut 'name' de l'élément INPUT type='hidden' dans lequel est stocké la valeur max de l'élément sélectionné
selectedIndex : Index de l'élément à pré-selectionné
minValue : valeur min de l'élément à pré-selectionné
maxValue : valeur max de l'élément à pré-selectionné
onClick : nom de la fonction appelée au déclenchement de l'événement 'onClick'

Comment faire...

...préselectionner au chargement de la page

Premiere solution : utiliser l'option selectedIndex.

$(document).ready(function(){
    $('#clb_surface_preselected').clickMenu({ minValues:'||15|25|50', maxValues:'|14|24|49|99', minCustomText:'Plus de {0} m²',
        maxCustomText:'Moins de {0} m²', minMaxCustomText:'De {0} à {1} m²'
            , selectedIndex:1 });
});

Deuxième solution : utiliser les options minValue et maxValue.

$(document).ready(function(){
    $('#clb_surface_preselected').clickMenu({ minValues:'||15|25|50', maxValues:'|14|24|49|99', minCustomText:'Plus de {0} m²',
        maxCustomText:'Moins de {0} m²', minMaxCustomText:'De {0} à {1} m²', 
            minValue:80, maxValue:110 });
});

...déclencher un événement lors de la sélection d'un élément

Avec une liste d'éléments à valeurs multiples (min et max)

$(document).ready(function(){
    $('#clb_budget').clickMenu({ 
        minValues:'||150000|200000|250000|350000|500000', 
        maxValues:'|100000|150000|200000|250000|350000', 
        minCustomText:'Plus de {0} €', maxCustomText:'Moins de {0} €', 
        minMaxCustomText:'De {0} à {1} €', onClick:onClick_budget });
});

function onClick_budget(selectedIndex, selectedText, selectedMinValue,
    selectedMaxValue){ alert('Index: ' + selectedIndex + ' - Text: ' + selectedText
    + ' - Min: ' + selectedMinValue + ' - Max: ' + selectedMaxValue); }
   

Avec une liste d'éléments à valeur unique

$(document).ready(function(){
	$('#clb_typeBien').clickMenu({ minValues:'|1|2|3|10|5|8|7|99'
        , onClick:onClick_typeBien });
});

function onClick_typeBien(selectedIndex, selectedText, selectedValue){
    alert('Index: ' + selectedIndex + ' - Text: ' + selectedText + ' - Valeur: ' + selectedValue);
    }