Tutorial jQuery – Mostrare Degli Elementi in Base a una Select
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.
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.
4 Commenti
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
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.
Grazie Sergio per il tuo contributo!
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!