Fw

Wordpress Creative Developer

Tutorial jQuery – Mostrare Degli Elementi in Base a una Select

  • Tutorial Jquery
  • -

Appuntamento con i tutorial jQuery, dove vediamo tecniche per migliorare la user experience degli utenti durante la navigazione nei siti web.

In particolare oggi andiamo a vedere come far comparire degli elementi in base alla opzione scelta in una Select.

Tutorial jQuery - Mostrare un Div in Base a Una Select

Puoi vedere subito la demo di quello che vogliamo realizzare.

Analizziamo il tutorial nei dettagli.

Codice Html

Questo il codice HTML per la Select e per i div che dovranno comparire.


Primo div

Mostriamo solo il primo div, mentre gli altri due vengono nascosti (style=”display:none”).

Codice jQuery

Oltre ad includere la libreria jQuery, dovrai scrivere queste poche righe di codice per ottenere l’effetto visto nella demo, prima della fine del tag head.

 

Come puoi vedere prima vengono nascosti tutti i div con il metodo .hide(), e poi con il metodo .val() vengono prelevati i valori dalla select e quindi mostrati i div in base all’opzione scelta.

Guarda la demo

4 Commenti

  1. Ciao,
    mi piacerebbe sapere sapere se è possibile utilizzare questo bellissimo javascript non solo con un menu select, ma semplicemente con dei link in modo tale che al click di un link compaia un div e gli altri due vengano nascosti.
    Spero di essere stato chiaro.

    Grazie

  2. Si, é possibile. E’ sufficiente sostituire il codice markup (HTML) scritto dall’autore con il seguente:

    Primo Div
    Secondo Div
    Terzo Div

    Primo div
    Secondo div
    Terzo div

    // Innanzitutto come valore di default dei vari link, nel foglio di stile, devi scrivere tipo:

    #primo-div{ display:none; }
    #secondo-div{ display:none; }
    #terzo-div{ display:none; }

    // Per quanto riguarda l’ordine te lo aggiusti come vuoi
    // Poi, come script, usi il seguente:

    $(“#sel_div_uno”).click(function() {
    $(“#primo-div”).fadeIn(500);
    });

    // …queste poche righe non solo ti faranno comparire il div desiderato, ma lo faranno con un cazzuto effetto grafico.

  3. Ringrazio anche io, ormai non mi serve più in quanto ho già sviluppato il sito in cui mi interessava usare questo javascript, però per il futuro torna sempre utile!

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *