Select multiple concatenate in JQuery senza ajax

Proprio ieri per un progetto di lavoro ho avuto la necessità di creare delle select concatenate in php di media complessità. Vediamo come realizzarle in jQuery senza toccare nemmeno una riga di Ajax.

Ovviamente per le select concatenate il metodo migliore da usare è l’ajax che “spedisce” via POST i valori selezionati dall’utente nel select e in tempo reale “filtra” i risultati a seconda del valore scelto in precedenza. La soluzione da me proposta è palesemente meno professionale e so già che i “puristi” del web design mi uccideranno, tuttavia ho deciso di postarla poichè risulta  molto facile, intuitiva e veloce,  e per chi  come me non conosce a fondo il linguaggio Ajax ( o non  ha tempo per impararlo in tempo), è sicuramente la soluzione ideale.

Struttura Html, CSS e Animazioni del nostro select senza Ajax

           <div id="macro">
           Macro - interventi<br />
          <SELECT NAME="macro" style="width:300px;">

                <OPTION VALUE="giardino" class="giardino" >giardino
                <OPTION VALUE="fogne" class="fogne">fogne
                </SELECT><br />

          </div><!--macro-->

         Micro - interventi<br  />   

         <div id="micro">
         <SELECT NAME="micro" style="width:300px;">

                <OPTION VALUE="blank">seleziona una macro-intervento prima
        </SELECT><br />

       </div><!--micro-->

          <div id="micro-giardino">
          <SELECT NAME="interventi-giardino" class="prex"  style="width:300px;">

                <OPTION VALUE="potatura_alberi">potatura_alberi
                <OPTION VALUE="potatura_siepi">potatura_siepi

           </SELECT><br />

           </div><!--micro-->

           <div id="micro-fogne">
           <SELECT NAME="luogo" class="prex"  style="width:300px;">

                <OPTION VALUE="gestione_fognaria">gestione_fogniaria

          </SELECT><br />

         </div><!--micro fogne-->

Come potete vedere dal codice, ho fatto qualcosa che a prima vista può risultare strano: ho creato un select “macro-interventi” dove il cliente andrà a scegliere il macro il macro settore che gli interessa (es. manutenzione giardino). Il secondo select “micro” è di fatto vuoto (almeno all’inizio). Gli altri due select sono da rendere invisibili via css, dopo vedrete il  perchè:

       #macro{ clear:both; margin:15px 0px 15px 0px;}
       #micro{ clear:both; margin:15px 0px 15px 0px; }
       #micro-giardino{ clear:both; margin:15px 0px 15px 0px; display:none;}
       #micro-fogne{ clear:both; margin:15px 0px 15px 0px; display:none;}

Come vedete i div micro-fogne e micro-giardino sono invisibili perchè dipendono da che scelta (macro-intervento) farà l’utente. Ora animiamo il tutto con JQuery senza toccare neanche di striscio Ajax in questo modo:

<script type="text/javascript">

$(document).ready(function() {

var macro = $('#macro').select();//imposto la selezione su macro
var micro = $('#micro').select();//imposto la selezione su micro

	$('#macro').change(function() { //al variare di macro (l'utente sceglie il macro-intervento)

	   if( $('.fogne').is(':selected') ) { //se il valore macro "fogne" è selezionato

 		  $("#micro").hide();   //chiudo il select vuoto
	          $("#micro-fogne").fadeIn(); //faccio apparire il select micro relativo al micro-intervento fogne
			}//fine prima scelta

			else if ( $('.giardino').is(':selected') ){ //uguale a prima ma per giardino

			$("#micro-fogne").hide(); //chiudo il select delle fogne
			$("#micro-giardino").fadeIn(); //apro il select giardino

			}

		});

		});//FINE DOM

        </script>

Et voilà! un bel select concatenato “fittizio” ma perfettamente funzionante! ovviamente possiamo popolare i valori dei vari select con php facendo un semplice loop while 😉

NOTA1: Ovviamente vi conviene impostare il primo valore della select “macro” vuoto o con label “seleziona il macro intervento da inserire”. Ovviamente andrà modificato di conseguenza anche il codice jQuery.

NOTA2: per i meno esperti, la prima porzione di codice va incollata DENTRO un form php. Per chi non lo sapesse il select è il menù  tendina tipico dei form. Maggiori info qui.

NOTA3: Se proprio non vuoi rinunciare a usare l’Ajax ti consiglio QUESTA GUIDA, anche se la reputo un pò confusionaria.

Resta comunque  il fatto che con ajax il select sarebbe stato ben più professionale ma onestamente il progetto su cui sto lavorando  è lungo e ho davvero poco tempo, per cui mi sono dovuto arrangiare con le conoscenze che avevo, spero vi sia utile a domani!

foto credits: Criterion