Il blog per tutti gli smanettoni del pc

Personalizzare una Select Box !

JavaScript 
lug 5

Non tutti i componenti del form sono personalizzabili al 100%, a volte è possibile modificare solo alcune caratteristiche come il colore del testo e dello sfondo .

La select box difficilmente viene personalizzata via css perchè molti browser non accettano pienamente questa funzione .
Impariamo a creare una select box tutta nostra con l’ausilio del nostro amato framework Jquery !

Per l’occasione ho preparato questo semplice form che è costituito da una textbox , una select box e un submit .



La select box si presenta come un div (.selectBox) con i segunti nodi figli :

  1. .input Qui viene visualizzato il testo scelto dell’utente nel menu a tendina
  2. input hidden Il valore scelto viene copiato in questa field per poter essere inviato durante il submit del form
  3. .arrow Pulsantino per aprire il menu a tendina
  4. .hoverBox Una lista (ul) contenente i valori di scelta


<div class="selectbox"><span class="">Seleziona un valore</span>
    <input type="hidden" value="none" name="field2" />
    <a href="#" class="arrow"></a>
    <ul class="hoverBox">
      <li><a href="#">item 1</a></li>
      <li><a href="#">item 2</a></li>
      <li><a href="#">item 3</a></li>
      <li><a href="#">item 4</a></li>
      <li><a href="#">item 5</a></li>
    </ul>
  </div>

Vediamo cosa fa il seguente codice jquery che regola il funzionamento di tutta la selectbox

<script type="text/javascript">
$(document).ready(function(){
// Funzione che viene chiamata quando la pagina si carica
 
// Gestione freccia Select Box
 
$(".selectbox .arrow").click(function(){
 
// Quando utente clicca sulla freccia ...
 
$(this).parent().children(".hoverBox").show();
 
 
});
// Quando utente fa click il box scompare
$(".selectbox .hoverBox").mouseup(function(){
	$(this).hide();
})
// Quando utente clicca su un link , il valore viene copiato nello SPAN nell hidden
$(".selectbox .hoverBox a").click(function(){
	var value = $(this).text();
        $(this).parent().parent().parent().children("input").val(value);
    $(this).parent().parent().parent().children(".input").text(value);															 
								});
 
						    });
			</script>

Quando l’utente fa click nella freccia ( .arrow ) viene visualizzato il box contenente i link .

$(this).parent().children(".hoverBox").show();

Se l’utente preme un link il valore viene copiato sia nello span , per la visulizzazione grafica , e sia nell’input hidden .

	var value = $(this).text();
        $(this).parent().parent().parent().children("input").val(value);
        $(this).parent().parent().parent().children(".input").text(value);

Lascia un Commento