Select dinamica in base alle scelte dell'utente

[allin81]

Salve a tutti
avrei bisogno di modificare il modulo del motore di ricerca interno in modo piu' dinamico.

Al momento faccio scegliere il tipo di pacchetto "pacchetto con volo" e quando viene selezionato l'aeroporto di partenza si apre una select nascosta con tutte le date disponibili (prendendole dal database)

Adesso pero' ho aggiunto anche il "pacchetto senza volo" e quindi non vorrei far comparire la select che fa scegliere l'aeroporto (e di conseguenza quella che fa scegliere le date disponibili)

Incollo la parte del codice html e javascript che utilizzo al momento.
In che modo potrei modificare?

Grazie

<form action="cerca.php" method="post" name="ricerca" id="ricerca" onsubmit="return ricerca_offerte()" autocomplete="off">
<div class="form-group">
<label>Tipo di Pacchetto</label>
<select name="tipo_offerta" class="form-control" required><option value="" selected>Seleziona</option><option value="3">Pacchetto con Volo</option><option value="4">Pacchetto senza Volo</option></select></div>
<div class="form-group">
<label>Scegli Aeroporto di Partenza</label>
<select name="citta" class="form-control" onChange="showNode(this.value);" required><option value="" selected>Seleziona</option><option value="2">Napoli Capodichino</option></select><br>
<div id="1" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
<select name="arrivo_roma" class="form-control"><option value="0" selected>Seleziona</option></select><br>
</div>
<div id="2" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
<select name="arrivo_napoli" class="form-control"><option value="0" selected>Seleziona</option><option value="2021-06-07">07/06/2021 </option><option value="2021-06-14">14/06/2021 </option><option value="2021-06-21">21/06/2021 </option><option value="2021-06-28">28/06/2021 </option><option value="2021-07-05">05/07/2021 </option><option value="2021-07-12">12/07/2021 </option><option value="2021-07-19">19/07/2021 </option><option value="2021-07-26">26/07/2021 </option><option value="2021-08-02">02/08/2021 </option><option value="2021-08-09">09/08/2021 </option><option value="2021-08-16">16/08/2021 </option><option value="2021-08-23">23/08/2021 </option><option value="2021-08-30">30/08/2021 </option><option value="2021-09-06">06/09/2021 </option><option value="2021-09-13">13/09/2021 </option><option value="2021-09-20">20/09/2021 </option><option value="2021-09-27">27/09/2021 </option><option value="2021-10-04">04/10/2021 </option><option value="2021-10-11">11/10/2021 </option><option value="2021-10-18">18/10/2021 </option></select><br>
</div>
<div id="3" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
<select name="arrivo_bari" class="form-control"><option value="0" selected>Seleziona</option></select><br>
</div>
<div id="4" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
<select name="arrivo_milano" class="form-control"><option value="0" selected>Seleziona</option></select><br>
</div>
<div id="5" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
<select name="arrivo_bologna" class="form-control"><option value="0" selected>Seleziona</option></select><br>
</div>
<div id="6" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
<select name="arrivo_venezia" class="form-control"><option value="0" selected>Seleziona</option></select><br>
</div>
<div id="7" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
<select name="arrivo_bergamo" class="form-control"><option value="0" selected>Seleziona</option></select><br>
</div>
<div id="8" style="display: none;"><label>Scegli il giorno di partenza tra quelli disponibili</label><br>
<select name="arrivo_verona" class="form-control"><option value="0" selected>Seleziona</option></select><br>
</div>
<div class="form-group">
<label>Durata:</label>
<select name="prezzo_come" class="form-control" required><option value="" selected>Seleziona</option><option value="1" >7 Notti</option><option value="2" disabled>Altre opzioni: contattaci</option></select></div>
<div class="row">
<div class="col-sm-12"><button type="submit" name="ricerca" class="btn btn-warning cerca-la">Mostrami i Preventivi</button></div>


</div>
</form>
<script type="text/javascript">
function showNode (sID) {
	//alert (sID);
    showNode.active && showNode.active.style.setProperty("display", "none");
	if (sID != 0) {
		//alert (sID);
		showNode.active = document.getElementById(sID);
		showNode.active && showNode.active.style.setProperty("display", "block");
	}


}
</script>

[alka]

Gestisci l'evento onchange sulla casella di selezione del tipo di offerta e in base all'opzione scelta, agisci sui controlli correlati modificando lo stile display mettendolo "block" o "none" per renderlo visibile o meno.

Sai gestire gli eventi? Si tratta di un passaggio fondamentale da approfondire prima di iniziare a scrivere codice su una pagina.

[allin81]

Gestisci l'evento onchange sulla casella di selezione del tipo di offerta e in base all'opzione scelta, agisci sui controlli correlati modificando lo stile display mettendolo "block" o "none" per renderlo visibile o meno.

Sai gestire gli eventi? Si tratta di un passaggio fondamentale da approfondire prima di iniziare a scrivere codice su una pagina.

ma quindi rimuovo il js e utilizzo solo l'evento onchange?

[alka]

ma quindi rimuovo il js e utilizzo solo l'evento onchange?

Il codice che hai scritto non riesco a comprenderlo: definisce una funzione showNode() e poi testa delle proprietà su di essa, direttamente all'interno del corpo della funzione, e non capisco a cosa serve stando al problema che hai descritto.

A mio avviso, devi riscrivere il codice corretto che gestisca l'evento nel modo opportuno e regoli la visualizzazione degli elementi correlati.

Parti da una implementazione semplice, magari facendo dei log quando il codice viene eseguito, e piano piano riempi gli spazi con il codice effettivo necessario, così a ogni passaggio è possibile verificare che l'implementazione sia valida (questo ovviamente se non hai ancora molta dimestichezza con JavaScript e l'uso del DOM).

Ciao!

[allin81]

Il codice che hai scritto non riesco a comprenderlo: definisce una funzione showNode() e poi testa delle proprietà su di essa, direttamente all'interno del corpo della funzione, e non capisco a cosa serve stando al problema che hai descritto.

A mio avviso, devi riscrivere il codice corretto che gestisca l'evento nel modo opportuno e regoli la visualizzazione degli elementi correlati.

Parti da una implementazione semplice, magari facendo dei log quando il codice viene eseguito, e piano piano riempi gli spazi con il codice effettivo necessario, così a ogni passaggio è possibile verificare che l'implementazione sia valida (questo ovviamente se non hai ancora molta dimestichezza con JavaScript e l'uso del DOM).

Ciao!

mmm diciamo che con javascript non sono proprio ferratissimo.
Per caso ci sono degli script o degli esempi già disponibili? (non saprei con quale nome cercarli)

[alka]

mmm diciamo che con javascript non sono proprio ferratissimo.

Ma ci si può sempre documentare...

Per caso ci sono degli script o degli esempi già disponibili? (non saprei con quale nome cercarli)

Magari qualcosa di simile a una parte delle funzionalità che dovrai implementare si trova, ma per poter sfruttare l'esempio bisogna capire come funziona, quindi le basi si devono avere, e in ogni caso non sarà mai una versione completa di un software che soddisfa tutte le tue necessità particolari.

Essendo questo un forum di programmazione, se qualcuno si mette di buona volontà, si documenta, separa le problematiche e affronta un ostacolo alla volta cercando di scrivere il codice e (per errori o comportamenti anomali) ha bisogno di una mano, ben venga.

Tutti gli altri casi di "pappa pronta" per me sono da rigettare, o destinare all'area di ricerca collaboratori, perché di lavoro si tratta.

Ciao!