Salve a tutti!
Ho un menu a tendina in un form e vorrei che sotto a questo ci fosse un div (paragrafo, span o qualunque altra cosa) con dei contenuti dinamici all'interno.
Praticamente se dal menu a tendina scelgo un'opzione, nel div appare una scritta (es. hai scelto la prima opzione), se invece ne scelgo un'altra appare un'altra scritta (es. hai scelto la XX opzione).
E' possibile?
Un primo metodo.
I tuoi contenuti sono già scritti in dei DIV ma "nascosti" in quanto tenuti a display: none;
Una funzione richiamata dal gestore d' evento onchange assegnato al Tag della select ne cambierà lo stato.
codice:<!DOCTYPE html PUBLIC> <html> <head><title>none/block method</title> <script type="text/javascript"> var current = 0; function describe(which){ document.getElementById("description" + current).style.display = "none"; document.getElementById("description" + which).style.display = ""; current = which; } </script> </head><body> <form action="" method=""> <div align="center"> <table border="0"><tr> <td> <select name="" size="1" onchange="describe(this.selectedIndex);"> <option value="06" selected="selected">prima opzione</option> <option value="new">2nd option</option> <option value="used">troisième option</option> </select> </td> </tr><tr> <td> <div id="description0" style="display: ;" >hai scelto la prima opzione </div> <div id="description1" style="display: none;">hai scelto la seconda opzione </div> <div id="description2" style="display: none;">hai scelto la terza opzione </div> </td></tr> </table> </div> </form> </body> </html>
Funziona perfettamente! Grazie ^^
Eh no, aspetta un momento: prova a ricaricare la pagina dal pulsante di reload del Browser, dopo aver selezionato una option.
Ti ritrovi conservata l' opzione, ma con la nota di partenza.
È un' evenienza spesso tralasciata anche su questo Forum.
Finché si riparte dalla barra indirizzi, riazzera tutto e non ci sono problemi.
Ma se l' utente compie un refresh della pagina, il browser conserva quanto inserito negli elementi form: testo nelle textbox e textarea, spunte nelle checkbox, selezioni nei radio-button e nelle select, appunto; mentre html e script vengono "resettati".
Io ricorro al gestore d' evento ONLOAD, proprio dell' Elemento BODY (su certi browser funziona anche con IMG), per richiamare funzioni, dar corso a un' istruzione js; onload parte non appena l' html è stato caricato.
Nel nostro caso, possiamo ancora richiamare la describe()
<body onload="describe(document.forms[0].thesel.selectedIndex)">
passandole un parametro aggiornato che andiamo a ricavare dalla SELECT
document.forms[0] individua un dato FORM nel documento html; è una path javascript, potremmo dire. Se vi sono più form, si aggiusta il numero in [n] partendo da zero nella conta (criterio come negli Array); o si segue il NAME del FORM con ['nome_del_form'] (tra apici ' o ").
thesel è il NAME che avrai dato alla SELECT.
Forse non ci ho fatto caso io ma non ho notato questa cosa.
Per sicurezza ho aggiunto quello che hai postato ma non noto la differenza ._.
Con che browser hai provato tu? Mi rispieghi un pochino? ^^"
Permessi di invio
Rispondi quotando