Tre select concatenate

**navajo75** · 18-03-2010, 16:58

Salve a tutti,
sto cercando di concatenare tre select. Nella prima si sceglie la nazione e la seconda si popola dinamicamente con la città. Scegliendo poi la città, si popola la terza, quella dei comuni.
La seconda riesco a popolarla tranquillamente (seleziono Italia, ad esempio) e mi escono Roma e Milano. Quando però vado a selezionare Roma, la terza rimane bianca e non si riempie con i rispettivi comuni.
Nella speranza che qualcuno mi possa dare una mano, posto il codice.
Mille grazie a tutti coloro che vorranno intervenire.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head><title>Select doppia - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

var cittas = new Array("---","Roma","Milano");
var comuni_roma = new Array("---","Affile","Cerveteri");
var comuni_milano = new Array("---","Rho","San Donato Milanese");

function set_citta() {
var select_nazione = document.myform.nazione;
var select_citta = document.myform.citta;
var selected_nazione = select_nazione.options[select_nazione.selectedIndex].value;
select_citta.options.length=0;
if (selected_nazione == "Italia") {
for(var i=0; i<cittas.length; i++) {
select_citta.options[select_citta.options.length] = new Option(cittas[i]);
}
}
}

function set_comune() {
var select_citta = document.myform.citta;
var select_comune = document.myform.comune;
var selected_citta = select_citta.options[select_citta.selectedIndex].value;
select_comune.options.length=0;
if (selected_citta == "Roma") {
for(var i=0; i<comuni_roma.length; i++) {
select_comune.options[select_comune.options.length] = new Option(comuni_roma[i]);
}
}
}

</script>
</head>
<body>

<div align="center">
<font color="#ff4500"><h2>Select dinamica</h2></font>
<form name="myform" method="POST">
<table>
<tr>
<td>Nazione:</td>
<td>
<select name="nazione" onchange="set_citta()">
<option value="---">---
<option value="Afghanistan">Afghanistan
<option value="Albania">Albania
<option value="Algeria">Algeria
<option value="Italia">Italia
</select>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Città:</td>
<td>
<select name="citta" onchange="set_comune()">
<option value="---">---
</select>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Comune:</td>
<td>
<select name="comune">
<option value="---">---
</select>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>

**cavicchiandrea** · 18-03-2010, 18:13

Ti sconsiglio di voler eseguire tale operazione con delle array ci sono 8100 comuni sarebbe pesantissimo, usa come fanno tutti un linguaggio lato server (php/asp) e un db accoppiato con ajax

**navajo75** · 19-03-2010, 10:28

Innanzitutto grazie Andrea per la tua risposta.
Da pivello alle prime armi, ti devo confessare che non conosco Ajax e poi mi viene da fare una considerazione. Mi sembra di aver capito che il consiglio che tu mi hai dato sia per evitare di scrivere un array lungo una quaresima. Però se lo facessi con PHP non dovrei comunque creare una tabella, ad esempio con MySQL, in cui scrivere tutti i comuni.
In realtà poi preferirei farlo in Javascript, per evitare che ad ogni scelta dell'utente si refresci la pagina.
Se puoi, perfavore, aiutami con il codice che ho inserito nel primo post. Devo sbagliare qualcosa nella funzione set_citta.
Grazie e buona giornata

**Enzaccio** · 19-03-2010, 12:59

Quando definisci new Option(cittas[i]);
fai attenzione che è come se nella SELECT si stampasse:

<option value="">Roma
<option value="">Milano

con Valore di VALUE uguale a stringa vuota; difatti, se modifichi l' IF in:

if (selected_citta == "")

ti parte il popolamento (indifferentemente da se Roma o Milano, ovviamente; è per test).

Allo stato delle cose, potresti già recuperare l' option, non con value ma con text:

var selected_citta = select_citta.options[select_citta.selectedIndex].text;

La selezione su "nazione" invece funziona, perché ha appunto i suoi bei Valori di VALUE codificati nell' HTML standard.

**navajo75** · 19-03-2010, 15:14

Grande Enzaccio,
provato e tutto funziona come volevo io.
Aprofitto per un'altra domanda. Siccome queste tre select faranno parte di un form di registrazione, vorrei che i valori selezionati dagli utenti andassero a finire nel mio db.
Mettendo TEXT alla seconda funzione, ottengo ciò che voglio o devo fare ulteriori aggiustamenti?
Grazie!!!

**Enzaccio** · 20-03-2010, 12:35

Quindi tra il FORM e il DataBase ci sarà una Query in PHP, posso supporre; e allora PHP vorrà un VALUE da raccogliere come Variabile in $_GET o in $_POST .

Ti ho indicato dov'era l'inghippo, e se stimolato hai fatto ricerche avrai visto che nella definizione delle new Option() puoi far avere anche il VALUE

new Option("F. Rinaldi", "geometra")

si traduce una OPTION :

<option value="geometra">F. Rinaldi

Quindi nel tuo aso si tratterà di fare:

select_citta.options[select_citta.options.length] = new Option(cittas[i], cittas[i]);
tornando a
var selected_citta = select_citta.options[select_citta.selectedIndex].value;

Ora quello che mi verrebbe da dirti, concerne la sequela di if-statement che stando alla traccia del progetto dovresti codificare, uno per ogni città-provincia disponibile nella 2.a SELECT.
Sono 110 le Province Italiane, e altrettanti -incolla dell' if-statement, più riscrittura del nome città in tre punti, rimane ancora un lavoro fattibile.

Si potrebbe tuttavia semplificare gestendo gli elenchi in Array bi-dimensionali.
La cosa diventa altamente consigliabile qualora dovessi procedere ad un ulteriore passaggio di if-statement per tutti i Comuni, circa 8000 come ha ricordato Andrea. In questo caso, il problema non sarebbe tanto il peso (rimangono caratteri di testo), ma la compilazione.

Non so però se è il tuo caso, come pure posso pensare che il form voglia contemplare solo determinate (poche) città. E quindi fermiamoci qui.

**navajo75** · 21-03-2010, 09:27

E' esattamente come dici tu. Recupererò i valori delle SELECT con PHP e poi li scriverò nel mio db con una query.
Sono aperto ad ogni consiglio ed immaginavo, come segnalato da Andrea, che ci fosse una maniera meno arrovellata di risolvere la cosa.
Purtroppo però ho cominciato da poco e questi sono gli strumenti che ho a disposizione; tra l'altro con pochissimo tempo per effettuare ricerche.
Quindi devo dirti Enzaccio che hai centrato il punto: mi tocca fare un IF per ogni provincia italiana e cambiare ogni volta tre parti della condizione stessa.
Però non mi scoraggio e vado avanti, anche grazie a gente come te, che si prende la briga di leggere i miei post e fornirmi soluzioni.
Mille grazie.

**Enzaccio** · 21-03-2010, 11:49

Originariamente inviato da navajo75
.. tra l'altro con pochissimo tempo ...

Trova almeno il tempo di giocare con questo, puoi salvarlo così com'è; sempre con estensione .htm o .html sul Blocco Note / Editor di Testo:

codice:

<script type="text/javascript">


var cittas = new Array("---","Roma","La Spezia","Milano");

var comuni = new Array(
                        // 
                       new Array("---"),

                        // Roma
                       new Array("---","Affile","Cerveteri"),

                        // La Spezia
                       new Array("---", "Ameglia", "Bolano", "Follo", "Pignone"),

                        // Milano 
                       new Array("---","Rho","San Donato Milanese")//no virgola at ultimo

                      );


alert(cittas[2]);

alert(comuni[2]);

alert(comuni[2][4]);


</script>

var comuni è adesso un Array bi-dimensionale, cioè un Array che come articoli contiene altri Array;
var cittas rimane mono-dimensionale.

Così, con cittas[2] o comuni[2] accedi ai singoli articoli contenuti nell' uno e nell' altro Array:
il primo, ti stamperà La Spezia nell' alert()
il secondo, tutto l' Array con i comuni di La Spezia dacché questo è il suo contenuto a comuni[2]

Ora, con comuni[2][4] posso accedere a Pignone

Puoi anche farlo con document.write(comuni[2][4]); invece dell' alert.
// segna i commenti/note in JavaScript: il seguito della riga non viene processato.

Anch' io oggi ho poco tempo, spero di più per te che è Domenica; ciao.

P.S.: il numero del primo indice [] sarà dato dal selectedIndex ritornato dalla precedente SELECT

e qui sta il trucco per fare il tutto senza nessun if-statement ...

**navajo75** · 21-03-2010, 22:09

MA SEI UN GRANDE!!!
Se ce la faccio domani lo provo e ti faccio sapere.
Grazie di cuore!!!

**navajo75** · 22-03-2010, 12:50

Ho provato, ma sinceramente non capisco come fare ad evitare di mettere tutti gli IF.
Vado avanti per la vecchia strada dunque.
Grazie per il preziosissimo supporto Enaccio.

Discussione: Tre select concatenate

Strumenti discussione

Ricerca discussione

Visualizza

Tre select concatenate

selectedIndex value text

Array multi-dimensionali

Permessi di invio