select diverse

**georado** · 20-09-2006, 22:34

ciao a tutti, devo creare un form con diverse select; senso pratico:

"prima select"
dalla prima select un utente decide una option

"seconda select"
la seconda select deve essere diversa per ogni option della "prima select"

prima select un utente scglie A
secondo select deve uscire "B, C, D, E"
oppure prima select un tente sceglie B
seconda select deve uscire "F,G,H"

spero di essermi spiegato bene.

attendo aiuto e grazie a tutti

**fcaldera** · 21-09-2006, 00:17

un problema analogo risolto con javascript
http://forum.html.it/forum/showthrea...hreadid=967665

Ciao

**georado** · 21-09-2006, 22:28

... benissimo...
e se invece di "regione" e "provincia"
ci fossero tre select, tipo
"regione", "provincia" e "comune" ?

come si fa con tre select????

grazie dell'aiuto

**fcaldera** · 21-09-2006, 22:41

applichi lo stesso meccanismo alla seconda select e in base al suo valore carichi il contenuto della terza select. Nota che questo meccanismo è accettabile per quantità limitate di dati.

Ovvero, se decidi di usare questa soluzione per caricare davvero regioni città e comuni rischi di rendere il caricamento della pagina troppo lento e soprattutto il codice diventa ingestibile...

**fcaldera** · 21-09-2006, 23:02

ad ogni modo ecco il codice modificato con 3 select (può essere migliorato ma è per darti l'idea)

Se scegli veneto > treviso o veneto > venezia puoi vedere alcuni comuni per le due province...

codice:

<head>
<script type="text/javascript">

function province(reg) {

   var _province = new Array();
   
   var selProv = document.getElementById('province');
   while(selProv.options.length > 0) selProv.removeChild(selProv.options[0]); 
   comuni('');
   
   if (reg == "") return;


   switch(reg) {
    
        case 'veneto':            
            _province.push('Treviso');
            _province.push('Venezia');
            _province.push('Belluno');
            //...
            break;
   
        case 'trentino': 
            _province.push('Bolzano');
            _province.push('Trento');
            _province.push('Mich :-)');
            break;
            
            
        // altre regioni
        default: 
   }

    
    opt = document.createElement('option');
    opt.setAttribute('value', '');
    opt.setAttribute('text', 'Seleziona una provincia');
    opt.innerHTML = 'Seleziona una provincia';
    selProv.appendChild(opt);
    
    for (i=0; i<_province.length; i++) {
        opt = document.createElement('option');
        opt.setAttribute('value', _province[i]);
        opt.setAttribute('text', _province[i]);
        opt.innerHTML = _province[i];
        selProv.appendChild(opt);
    }
    
}

function comuni(prov) {

   var _comuni = new Array();
   var selCom = document.getElementById('comuni');
   while(selCom.options.length > 0) selCom.removeChild(selCom.options[0]); 
   
   if (prov == "") return;


   switch(prov) {
    
        case 'Treviso':            
            _comuni.push('Preganziol');
            _comuni.push('Ca\' Tron di Roncade');
            _comuni.push('Conegliano V.to');
            //...
            break;
   
        case 'Venezia': 
            _comuni.push('Peseggia');
            _comuni.push('Noale');
            _comuni.push('Mestre');
            break;
            
            
        // altre province
        default: 
   }

    
    opt = document.createElement('option');
    opt.setAttribute('value', '');
    opt.setAttribute('text', 'Seleziona un provincia');
    opt.innerHTML = 'Seleziona un comune';
    selCom.appendChild(opt);
    
    for (i=0; i<_comuni.length; i++) {
        opt = document.createElement('option');
        opt.setAttribute('value', _comuni[i]);
        opt.setAttribute('text', _comuni[i]);
        opt.innerHTML = _comuni[i];
        selCom.appendChild(opt);
    }
   
}

</script>
</head>

<body>

<select id="regioni" onchange="province(this.value)">
  <option value="">Scegli regione</option>
  <option value="veneto">Veneto</option>
  <option value="trentino">Trentino Alto Adige</option>
</select>

<select id="province" onchange="comuni(this.value)"></select>

<select id="comuni"></select>

</body>

Ciao

Keywords: select province regioni provincia regione

Discussione: select diverse

Strumenti discussione

Ricerca discussione

Visualizza

select diverse

Permessi di invio