LORETTA B. forum
Linguaggi di programmazione => Javascript => Topic aperto da: micdas - Agosto 20, 2009, 22:07:12
-
Ciao, avrei un altro quesito :Cartelli2:
A seconda della scelta che effettuo da una <select> dovrei fare in modo che vengano visualizzati o nascosti alcuni campi di inserimento.
Mi spiego con un esempio che si può vedere in questa pagina (http://ilquadernodimike.altervista.org/prove/mostra_nascondi/modulo2.html)
Nella pagina che ho mostrato ho già inserito del codice che ho trovato a questo indirizzo (http://javascript.html.it/articoli/leggi/1728/mostrare-e-nascondere-elementi-dinamicamente/) ma la cosa non funge come vorrei.
Infatti la visualizzazione o meno degli elementi viene effettuata mediante link creati da JS mentre deve essere realizzata a seconda delle scelte che si effettuano dalla <select>
Se scelgo "settore 1" o "settore 2" debbono essere visualizzati i campi di un gruppo
Se scelgo "settore 3" o "settore 4" debbono essere visualizzati i campi dell'altro gruppo
Se scelgo altre voci i campi dei due settori debbono rimanere nascosti.
Nella pagina che ho linkato ci sono delle brevi spiegazioni sulla struttura del codice.
Sarà possibile ottenere questa funzione agendo dalla select anzichè dai link?
Grazie per l'attenzione ed un grazie molto più grande a chi propone una soluzione
:bye: :tanks:
-
Ciao mic :ciao:,
cerco di risponderti brevemente (anche se sicuramente non ci riuscirò :linguaccia:)
io uso al posto dei div gli span e li nascondo o li visualizzo da js.
puoi provare a cambiare la tua pagina in questo modo (se ho capito bene cosa vuoi fare):
prima di tutto ho messo la funzione javascript direttamente nella pagina html anzichè nel js (ma è un fatto di comodità, tu fai come vuoi), di seguito la funzione js che ho scritto:
<script type="text/javascript">
function codice(variabile) {
switch(variabile) {
case 'sett 1':
document.getElementById('immagine').style.display='none';
document.getElementById('commenti').style.display='';
break;
case 'sett 2':
document.getElementById('immagine').style.display='none';
document.getElementById('commenti').style.display='';
break;
case 'sett 3':
document.getElementById('immagine').style.display='';
document.getElementById('commenti').style.display='none';
break;
case 'sett 4':
document.getElementById('immagine').style.display='';
document.getElementById('commenti').style.display='none';
break;
default:
document.getElementById('immagine').style.display='none';
document.getElementById('commenti').style.display='none'; }
}
</script>
praticamente mi intercetto cosa hai cambiato nella combobox e poi con un case trovo quei valori che mi interessano (nel tuo caso settore 1, settore 2, settore 3 e settore 4), poi lavoro sullo style.display per nascondere o visualizzare i due span "immagine" e "commenti" a seconda del case. Il "default:" nello switch sta ad indicare tutti gli altri casi (è come un else dell'if e nel tuo caso serve per i varie 1/2/3/4).
Di seguito come intercetto il cambio sulla select (semplicemente con un onchange):
<select name="trasfer" onchange="codice(this.value);">
Il this.value mi restituisce il valore della select (nel caso di "Settore 1" mi restituisce "sett 1")
Quindi ricapitolando le righe che devi cambiare nella tua pagina sono:
* eliminare il link al js e mettere la funzione che ti ho scritto nell'head della pagina
* modificare la select
da:
<select name="trasfer">
a:
<select name="trasfer" onchange="codice(this.value);">
(tieni presente che prima di questa select avevi una chiusura di una select che non serve </select>, eliminala)
* modificare i div in span e impostarli come invisibili
da:
<div id="commenti" class="toggle">
a:
<span id="commenti" style="display:none;">
* provare il tutto :okkey:
Fammi sapere poi se funziona.
Saluti
HellDevil
-
Ciao HellDevil :ciao:
Ti ringrazio per la tua risposta. Ora sto testando il codice in locale, quindi aggiornerò anche l'esempio che ho on line.
La modifica apportata con il default: nel costrutto switch è ottimo. Con questo sistema posso evitare il controllo sulle varie voci del menù a tendina.
:bye: :okkey: :vittoria: :tanks:
-
Bene, anzi benissimo :vittoria:
Mandato il modulo anche on line e lo si può ammirare da questo link (http://ilquadernodimike.altervista.org/prove/mostra_nascondi/modulo3.html).
Non ho sovrascritto il primo perchè può darsi che possa servire per altri tipi di applicazioni.
Per cui se quello è modulo2.html questo modificato è modulo3.html
:tanks:
-
Bene, anzi benissimo :vittoria:
Mandato il modulo anche on line e lo si può ammirare da questo link ([url]http://ilquadernodimike.altervista.org/prove/mostra_nascondi/modulo3.html[/url]).
Non ho sovrascritto il primo perchè può darsi che possa servire per altri tipi di applicazioni.
Per cui se quello è modulo2.html questo modificato è modulo3.html
:tanks:
Ottimo, ricorda però che hai ancora un select chiuso da togliere che non serve su questa riga:
</select> <select name="trasfer" onchange="codice(this.value);">
Saluti
HellDevil
-
Acc :accidenti: e da dove esce quella chiusura della select :Shok121: :arr:
Giuro che sono innocente :help: :sbirciare: :pianto:
Comunque ho provveduto e........ grazie dell'avvertimento :tanks: