controllo su select

[allin81]

Buonasera

esiste un controllo sulla select?

In pratica vorrei utilizzare una funzione solo se un campo è stato scelto.

La funzione in questione è

function showNode (sID) {
    showNode.active && showNode.active.style.setProperty("display", "none");
    showNode.active = document.getElementById(sID);
    showNode.active && showNode.active.style.setProperty("display", "block");
}
</script>

In pratica se la select chiamata citta è stata selezionata lo deve eseguire

Come posso fare?

Grazie

[KillerWorm]

Ciao, dovrebbe essere sufficiente impostare un gestore per l'evento onchange:
https://www.w3schools.com/jsref/event_onchange.asp

[allin81]

Ciao KillerWorm

in effetti utilizzo già questo gestore, in questo modo:

onChange=\"showNode(this.value);\"

Piu' precisamente cosi' costruendo la select da php:

$elenco_citta = "<select name=\"citta\" class=\"form-control\" onChange=\"showNode(this.value);\">$blocco_opzioni_citta</select>";
$elenco_citta2 = "<select name=\"citta2\" class=\"form-control\" onChange=\"showNode(this.value);\">$blocco_opzioni_citta2</select>"; 

In basso alla pagina ho il codice inserito nel primo post

Adesso ho il problema che quando seleziono la select "citta2" si apre la select di "citta"
Quindi vorrei fare in modo da aprire la select delle date corrette

L'esempio online lo tengo qui https://bit.ly/2YJUOUA
In alto a destra c'è il motore per la ricerca delle offerte funzionante (basta scegliere l'aeroporto che si apre il calendario corretto)
In basso ho la richiesta di preventivo ma selezionando la città di partenza non si apre la select con le date di partenza (oppure si apre quello del motore di ricerca delle offerte)

Sto anche provando a chiamare il gestore in 2 modi diversi, tipo:
onChange=\"showNode(this.value);\"
onChange=\"showNode2(this.value);\"

Ma ugualmente non va

Sarà una cavolata, ma sto da oggi...

[KillerWorm]

Ho dato uno sguardo alla pagina e, mentre verificavo la cosa, mi è parso di capire che tu abbia effettuato delle modifiche e che ad un certo punto tu abbia trovato la soluzione; correggimi se sbaglio; ora però vedo che stai continuando a modificare il codice.

Ad ogni modo, in sostanza penso si tratti del "vecchio caro" problema degli id duplicati. Attraverso le due select infatti stai richiamando una funzione alla quale passi un valore che corrisponde all'id dell'elemento che vuoi manipolare, ma avendo impostato degli elementi con degli id uguali (così mi sembra) l'interprete JavaScript, attraverso il metodo document.getElementById(), va a selezionare il primo trovato con quell'id, come è corretto che sia.

Chiaramente gli id devono essere univoci all'interno di uno stesso documento. Questa è una delle regole fondamentali per la programmazione web.

Per risolvere puoi quindi usare quella stessa funzione ma adoperando degli id differenti. Chiaramente dovrai applicare questi id sugli elementi da manipolare e, analogamente, dovrai impostare i valori delle option in modo che corrispondano a tali id.

[allin81]

Si, confermo che sto provando a fare delle modifiche ma ancora non ho trovato la soluzione corretta


Il metodo document.getElementById() lo sto provando ora, fino a una mezz'oretta fa non c'era, ma continuo ad avere il problema.


Se cambio l'id del modulo di preventivo aggiungendo qualcosa tipo i-1 mi funziona, il problema è che poi nel database finisce proprio i-1 e non 1 e quindi mi sballa tutto.

Quindi non ho capito se c'e' un modo per lasciare l'id senza mettere la lettera e il trattino per diversificare il nome oppure devo inserirli per forza

[KillerWorm]

Se cambio l'id del modulo di preventivo aggiungendo qualcosa tipo i-1 mi funziona, il problema è che poi nel database finisce proprio i-1 e non 1 e quindi mi sballa tutto.

Ok, ma direi che questo è un problema minimo che si può risolvere facilmente. L'importante è avere chiaro il concetto di univocità degli id, da lì non si scappa.

Quindi non ho capito se c'e' un modo per lasciare l'id senza mettere la lettera e il trattino per diversificare il nome oppure devo inserirli per forza

Gli id degli elementi HTML devono essere INCONTROVERTIBILMENTE UNIVOCI.

Quello che puoi fare, se non vuoi modificare i value delle option è passare, ad esempio, un prefisso alla funzione, da aggiungere al valore numerico restituito del select.

Un esempio vale più di mille parole:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <script>
         function showNode (sID) {
             showNode.active && showNode.active.style.setProperty("display", "none");
             showNode.active = document.getElementById(sID);
             showNode.active && showNode.active.style.setProperty("display", "block");
         }         
      </script>
   </head>
   <body>

      <select onchange="showNode('A'+this.value);">
         <option value="0" selected="">Seleziona</option>
         <option value="1">Lorem</option>
         <option value="2">dolor</option>
         <option value="3">sit amet</option>
         <option value="4">consectetur</option>
         <option value="5">adipiscing</option>
         <option value="6">elit</option>
      </select>

      <div id="A1" style="display: none;">Lorem</div>
      <div id="A2" style="display: none;">dolor</div>
      <div id="A3" style="display: none;">sit amet</div>
      <div id="A4" style="display: none;">consectetur</div>
      <div id="A5" style="display: none;">adipiscing</div>
      <div id="A6" style="display: none;">elit</div>
      
      <hr>
      
      <select onchange="showNode('B'+this.value);">
         <option value="0" selected="">Seleziona</option>
         <option value="1">Morbi</option>
         <option value="2">venenatis</option>
         <option value="3">nibh</option>
         <option value="4">consectetur</option>
         <option value="5">sit amet</option>
         <option value="6">mi elementum</option>
         <option value="7">semper</option>
      </select>

      <div id="B1" style="display: none;">Morbi</div>
      <div id="B2" style="display: none;">venenatis</div>
      <div id="B3" style="display: none;">nibh</div>
      <div id="B4" style="display: none;">consectetur</div>
      <div id="B5" style="display: none;">sit amet</div>
      <div id="B6" style="display: none;">mi elementum</div>
      <div id="B7" style="display: none;">semper</div>
      
   </body>
</html>

Nota come passo il valore alla funzione in modo diversificato per i due select

[allin81]

ottimo, ho capito adesso come farlo funzionare, ho adattato il tuo codice alla mia pagina ed adesso sembra funzionare perfettamente.

Era proprio il prefisso alla funzione che non sapevo come gestire.

Oltre ad aver risolto la situazione mi hai anche fatto capire meglio come fare questa cosa

Grazie, grazie, grazie