Zago Dev

Per un sito che sto creando, mi sono ritrovato a dover utilizzare una particolare grafica che modificava l’aspetto grafico delle select standard in uno personalizzato. Per fare questo ho usato la seguente libreria: jQuery – Skinning HTML Select Boxes di cui potete vederne una demo qui.

A parte un bug segnalato e risolto sullo stesso sito, nel quale dovete, nel file jquery.skinned-select.js, modificare la riga

this.options[0].innerHTML

in

this.options[this.selectedIndex].innerHTML

nel caso volete usare staticamente l’opzione selected=selected correttamente, lo stesso bug si ripropone nel caso l’opzione selected=selected la vogliate selezionare dinamicamente tramite jquery o qualsiasi altra libreria. In pratica se cambiate l’opzione selezionata della select da javascript invece che manualmente, questa non viene visualizzata correttamente, perchè in realtà quello che vedete non è la select che è nascosta, ma un div che assomiglia ad una select, e modificando il valore selezionato della select, il div non cambia. Bisogna quindi, una volta cambiata l’opzione tramite javascript, effettuare un “reskin” chiamando la seguente funzione:

function reskin() {
  //Find all the skinned select
  $('.skinned-select').each(
    function(i) {
      selectContainer = $(this);
      //For each children of the select container
      var textContainer = null;
      selectContainer.children().each(
        function() {
          //First child is textContainer
          if ($(this).is(":first-child")) {
            textContainer=this;
          }
          if ($(this).is("select")) {
            textContainer.innerHTML=this.options[this.selectedIndex].innerHTML;
          }
        }
      );
    }
  );
}

Spero vi possa essere utile.

Pubblicato in JavaScript il 5 giugno 2009 alle 11:03. Puoi seguire i commenti a questo post attraverso il feed RSS 2.0. Puoi lasciare un commento, o fare un trackback dal tuo sito.