mostrare campi del form in base alla scelta di una select

[allin81]

ciao a tutti
sto creando una form che mi inserisce le informazioni su alcuni trasferimenti.

Ho una select dove scelgo se il viaggio e' di sola andata oppure andata e ritorno.

In base a questa scelta vorrei mostrare i campi del ritorno o meno.

Quindi, se in "metodo" scelgono solo una tratta, dovranno vedere solo i "dettagli viaggio di andata"
se invece scelgono "andata e ritorno", vedranno entrambi i dettagli dove poter mettere i dati.

Allego l'immagine per rendere meglio l'idea.

Si puo' fare?

In passato l'ho fatto con un check box, ora vorrei farlo con la select

[allin81]

non so perche' ma viene piccolissima e non riesco ad ingrandirla questa immagine

[cavicchiandrea]

Non è che cambi molto dalle checkebox invece d'usare onclick come evento usi onchange e invece del checked per la verifica userai nomeoggetto.options[nomeoggetto.selectedIndex].value

[allin81]

sempre gentilissimo, ci siamo quasi, quando apro la pagina mi escono entrambe le schede (i campi per l'andata e quelli per il ritorno) appena clicco su una delle 2 opzioni della select "metodo" i campi del ritorno scompaiono ma se riclicco su un'opzione non ritornano piu'.
Io invece vorrei che quando apro la pagina mi esce solo la scheda "andata" ed appena seleziono "andata e ritorno" mi si apra anche la scheda del ritorno

Questo e' il mio codice

<script type="text/javascript">
function nascondiMostra (bShow) {
    Array.prototype.forEach.call(document.querySelectorAll(".nascosto"), function (oElement) {
        oElement.style[bShow ? "removeProperty" : "setProperty"]("display", "none");
    });
}

window.onload = function () {
    nascondiMostra(document.inserisci_trasferimenti.metodo.options[inserisci_trasferimenti.metodo.selectedIndex].value);
};
</script>

La select e' cosi' composta

<select name="metodo" id="metodo" onchange="nascondiMostra(this.checked);"     >
        <option selected>Seleziona</option>
        <option value="1">Una Tratta</option>
        <option value="2">Andata e Ritorno</option>
      </select>

ed in tutti i <tr> che hanno i campi del ritorno li ho modificati cosi':

<tr bgcolor="#ffffff" class="nascosto">

il modulo si chiama "inserisci_trasferimenti"

dove sbaglio?

[cavicchiandrea]

questo this.checked non è un attributo select cambialo così <select name="metodo" id="metodo" onchange="nascondiMostra(this.options[this.selectedIndex].value);">
Per la funzione do per scontato che funzioni non conosco la sintassi prototype (sempre che di prototipe si tratti)

[allin81]

in effetti avevo copiato il codice del checkbox che usavo e non ho modificato bene l'attributo da dare alla select.

Ma adesso pero' cambiandolo come dici tu non fa nessuna azione, prima qualcosina (pur se sbagliata) si muoveva

[cavicchiandrea]

<script type="text/javascript">
function nascondiMostra (bShow) {
var riga = document.getElementsByClassName("nascosto")
for(var i=0; i<riga.length; i++){
if(bShow==1){
riga[i].style.display="none";
}else{
riga[i].style.display="block";
}
}
}
window.onload = function () {
nascondiMostra(document.inserisci_trasferimenti.metodo.options[inserisci_trasferimenti.metodo.selectedIndex].value);
};
</script>

[allin81]

quasi perfetto, gia' prende forma, ti ringrazio ancora

Unico problema e' che la pagina si apre con l'opzione selezionata sulla parola "seleziona" che non ha nessun value, quindi quando apro la pagina mi apre gia' entrambi i blocchi (solo andata e andata e ritorno) mentre vorrei farlo aprire con solo il blocco di "solo andata"

Ho provato a dare value="0" all'opzione "seleziona" ed ad aggiungere un if in piu' al tuo codice, cosi'

if(bShow==0){
riga[i].style.display="none";
}

ma non va...

[cavicchiandrea]

Ma se vuoi che sia chiuso uno dei due div perché non lo imposti con i css di default su display none

[allin81]

ho provato a mettere il display:none ad un div che contiene la tabella, ma poi mi resta sempre nascosto