Aggiornare select dopo un'altra select

[Fire Fox II]

Salve raga

avrei bisogno di aggiornare una select (query che viene effettuata in un database) dopo aver effettuato un altra'select...

Del tipo, da un select contenente i nomi delle regioni, effettuata la scelta e in un'altra select mi compaiono le relative città...

Sono riuscito a risolvere chiamando un script che mi ricarica la pagina, ma io vorrei evitare questo se possibile...

Come potrei ovviare?

Thanks

[Little Hawk]

Originariamente inviato da Fire Fox II
Salve raga

avrei bisogno di aggiornare una select (query che viene effettuata in un database) dopo aver effettuato un altra'select...

Del tipo, da un select contenente i nomi delle regioni, effettuata la scelta e in un'altra select mi compaiono le relative città...

Sono riuscito a risolvere chiamando un script che mi ricarica la pagina, ma io vorrei evitare questo se possibile...

Come potrei ovviare?

Thanks

Se non stai usando jQuery te lo consiglio dal momento che rende le cose piu' semplici.
Potresti utilizzare l'evento onchange sulla prima select per fare una richiesta AJAX che carichi le opzioni per la seconda select, e poi aggiornare la seconda select. Hai bisogno di qualche esempio o e' chiaro?

[Fire Fox II]

Originariamente inviato da Little Hawk
Se non stai usando jQuery te lo consiglio dal momento che rende le cose piu' semplici.
Potresti utilizzare l'evento onchange sulla prima select per fare una richiesta AJAX che carichi le opzioni per la seconda select, e poi aggiornare la seconda select. Hai bisogno di qualche esempio o e' chiaro?

Grazie per l'aiuto...

Se magari puoi farmi giusto una bozza, poi approfondisco...

In realtà, non sono ancora ben addentrato nell'argomento jquery, ma mi sa che è il momento...

[br1]

L'argomento e' stato affrontato millemila volte in questo forum... per non parlare degli altri

Nell'attesa cimentati con una ricerca

[Little Hawk]

Dal momento che ci sono almeno 10000 comuni in Italia, ti conviene caricare le citta' dinamicamente piuttosto che rendere una lista enorme nella pagina (spero tu non abbia fatto questo )

Con jQuery semplifichi parecchio.

Diciamo che hai una prima select con le regioni:

<select id="region">
  <option value="Abruzzo">Abruzzo</option>
  <option value="Basilicata">Basilicata</option>
  <option value="Calabria">Calabria</option>
  ...
</select>

ed un'altra select inizialmente vuota per le citta',

<select id="city"/>

e vuoi che questa select venga 'riempita' con le citta' caricate attraverso una richiesta AJAX quando selezioni una regione.

Con jQuery puoi fare qualcosa del genere:

$(function() {

  var regionSelect = $("#region");

  regionSelect.change(function() {
    $.getJSON('/cities.json?' + $.param({ region: this.val() }), function(cities) {
      var html = '';

      for (var i = 0; i< cities.length; i++) {
          html += '<option value="' + cities[i] + '">' + cities[i] + '</option>';
      }
    
      regionSelect.html(html);
    });
  });  

});

Spiegazione...

$(function() {
...
});

Questo fa si' che il DOM della pagina sia pronto quando il resto del codice viene eseguito; altrimenti puo' capitare che le selects non siano ancora presenti nella pagina mentre essa viene caricata, quando il resto del codice viene eseguito.

var regionSelect = $("#region");

Dal momento che il codice ha bisogno di interagire con la prima select piu' volte, conviene salvare ("cache") il riferimento alla prima select in una variable, cosi' che jQuery non debba trovare la prima select ogni volta ma sa gia' "dov'e'".

regionSelect.change(function() {
  ...
});

Qui aggiungi un "listener" all'evento "change" della prima select, cosi' ogni volta che cambi la regione selezionata, il codice definito per l'evento "change" verra' eseguito automaticamente.

$.getJSON('/cities.json?' + $.param({ region: this.val() }), function(data) {
  ...
});

Qui fai una richiesta AJAX per caricare le regioni per il paese selezionato (passato come querystring argument). Naturalmente invece di /cities.json qui userai lo URL del tuo script.
E' piu' semplice se lo script ritorna le citta' in formato JSON cosi' questi dati possono essere utilizzati direttamente con JavaScript.

var html = '';

for (var i = 0; i< cities.length; i++) {
  html += '<option value="' + cities[i] + '">' + cities[i] + '</option>';
}
    
regionSelect.html(html);

Qui non fai altro che caricare le citta' per la regione selezionata, nella select per le citta'; ci sono vari modi per fare questo ma sostituire l'html contenuto dalla select direttamente ha prestazioni migliori.

Ho scritto il codice velocemente e non l'ho testato ma dovrebbe funzionare o comunque darti una idea.

[cavicchiandrea]

Originariamente inviato da Fire Fox II
Salve raga

avrei bisogno di aggiornare una select (query che viene effettuata in un database) dopo aver effettuato un altra'select...

Del tipo, da un select contenente i nomi delle regioni, effettuata la scelta e in un'altra select mi compaiono le relative città...

Vedi se questa discussione può aiutarti.

[Fire Fox II]

Grazie ad entrambi per gli ottimi suggerimenti!!!