<select> dinamiche

ciao,

vorrei inserire tre select nella mia pagina, la prima fissa che contiene la lista delle regioni d'italia, la seconda dipendente dalla prima che conterra' le provincie della regione selezionata e la terza contenente i comuni della provincia selezionata...non ho idea di come fare, vorrei sapere se posso farlo in php, se ho bisogno del javascript...dove posso trovare info che mi aiutino?

scusate e grazie a tutti

inviato 11 anni fa
purpitta
X 0 X

Serve un po' di Javascript ed un po' di PHP.

Ci sono 2 modi per ottenere il risultato: usare un approccio tradizionale oppure usare AJAX. Con il primo l'intera pagina deve essere ricaricata (e ricostruita dal PHP) ogni volta che si effettua una selezione della regione e della provincia. Il secondo è per i più esperti ma permette di non dover ricaricare l'intera pagina.

Il primo metodo funziona così:

1) Uno script PHP costruisce il form. Poiché non è stata selezionata la regione, le select (create con degli echo) dovranno essere senza opzioni

1) un piccolo javascript contenuto nella pagina invia il form allo stesso script PHP per ogni cambiamento delle select (dovrebbe andar bene l'evento "onChange")

2) lo script PHP rigenera il form accorgendosi però quale regione è stata selezionata. La select che contiene le province verrà questa volta costruita (sempre con degli echo) inserendo tutte le opzioni opportune relative alla regione selezionata

3) stesso meccanismo per le province

Considerazioni generali:

- Potrebbe essere conveniente avere tutte le regioni, le province ed i comuni in un DB

- Poiché le select non sono "statiche" sarà compito del PHP crearne l'HTML che le compone. Inoltre sarà sempre compito del PHP far si che le selezioni precedentemente fatte dall'utente (regione, provincia) rimangano selezionate.

- Il nodo cruciale dello script PHP è il sistema per capire come costruire il form rispetto ai dati già inseriti dall'utente. Servirà quindi una analisi dei dati provenienti da POST

Se questa tecnica ti sembra una passeggiata allora ti illustro la tecnica AJAX

 :bye:

risposto 11 anni fa
Gianni Tomasicchio
X 0 X

inanzitutto grazie mille per le risposte. :)

e' tutto su un db:ho una tabella "comuni" che contiene "regione,provincia,comune,cap" ;

vediamo se ho capito...faccio un form con le select vuote tranne quella con le regioni con "onChange" chiamo una funzione javascript che mi crea la seconda select e cosi per la terza?quindi javascript restituisce una variabile con il nome della regione e in base a questa php seleziona le province?

ma come fa javascript a comunicare con php?

risposto 11 anni fa
purpitta
X 0 X

Non puoi chiamare una funzione javascript per costruire le select: da dove prenderebbe i contenuti?

Il javascript si deve limitare a inviare ovvero fare il submit del form. Così lo script PHP sul server si accorgerà che nel form è stata selezionata una regione, prenderà dal db l'elenco dei comuni e con questi dati costruirà nuovamente il form, questa volta riempiendo anche il secondo select

Stessa cosa per il terzo select

 :bye:

risposto 11 anni fa
Gianni Tomasicchio
X 0 X

quindi dovrei fare qualcosa di simile:

"onChange="javascript:form.submit()" "

giusto????

cosi devo caricare la pagina ad ogni selezione......invece ajax?e' la prima volta che ne sento parlare, potresti indicarmi qualche articolo o qualche guida riguardante ajax?cosi magari gli do un occhiata....

grazie

risposto 11 anni fa
purpitta
X 0 X

Esatto, invia il form ed al resto deve pensare PHP

per AJAX leggi qui:

http://www.phpnews.it/content/view/267/80/

 :bye:

risposto 11 anni fa
Gianni Tomasicchio
X 0 X

Mi intrometto perchè proprio setimana scorsa ho dovuto realizzare qualche cosa di simile, ti posto lo script che avevo trovato e da cui sono partito.

Anche io poi ho ricreato gli array javascript estraendo i dati da un DB tramite PHP.

Ciao

<HTML>
<HEAD>
   <TITLE>JsDir - Riempimento dinamico di SELECT-list</TITLE>
<SCRIPT>
<!--
var prov=new Array();
   prov[0]=new Array("Bari","Brindisi","Foggia","Lecce","Taranto");
   prov[1]=new Array("Matera","Potenza");
   prov[2]=new Array("Cagliari","Nuoro","Oristano","Sassari");

var sigle=new Array()
   sigle[0]=new Array("BA","BR","FG","LE","TA");
   sigle[1]=new Array("MT","PT");
   sigle[2]=new Array("CA","NU","OS","SS")

function Riempi(source)
   {
   with (document.modulo.output)
      {
      while (options.length > 0)
         options[0]=null;
      for (i=0;i<prov[source].length;i++)
         options[i]=new Option(prov[source][i],sigle[source][i])
      options.selectedIndex=0;
      }
   }
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#000000" ALINK="#000000" VLINK="#000000" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%" HEIGHT="100%"><TR><TD ALIGN="center" VALIGN="middle">
<FORM NAME="modulo">
<SELECT NAME="input" onChange="Riempi(this.options.selectedIndex)">
   <OPTION>Puglia</OPTION>
   <OPTION>Basilicata</OPTION>
   <OPTION>Sardegna</OPTION>
</SELECT>
<SELECT NAME="output">
<OPTION>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</OPTION>
</SELECT>
</FORM>
</TD></TR></TABLE>
</BODY>
</HTML>
risposto 11 anni fa
Lokki
X 0 X

L'approccio usato nello script precedente va bene se i dati da gestire non sono tantissimi. Ma se si vogliono gestire tutti i comuni d'Italia la pagina diventa enorme e pesante. Ecco perché consigliavo di far interagire la pagina col server in modo da recuperare le informazioni necessarie di volta in volta.

 :bye:

risposto 11 anni fa
Gianni Tomasicchio
X 0 X

grazie per lo script.

espongo nuovamente il problema....

ho una pagina con tre tag <select> regione,provincia e comune.per riempire le options faccio tre query al db e recupero le info.

io posso selezionare una qualsiasi o delle select o piu di una.pero' ad ogni selezione di una devo aggiornare le altre due.

inoltre il form in cui metto queste select tra gli altri ha:

<input type="hidden" name="fz" value="nome_funzione">

<input type="submit" value="continua">

quando si clicca su continua verra' chiamata la funzione "nome_funzione" di una classe.

Se faccio il submit ogni volta che faccio una selezione come faccio a distinguere quando chiamare la funzione e quando aggiornare le select?

se uso lo script che e' stato postato dovrei passare l'array giusto al javascript...esiste un modo per usare le variabili php dentro il javascript...ad esempio

function riempi(select,source)

{

   with (document.modulo.output)

   {

      while (options.length > 0)

         options[0]=null;

      for (i=0;i<$$select[$source].length;i++)

         options=new Option($$select[$source])       options.selectedIndex=0;       }    } } scusate ma sono moooooolto confusa.

risposto 11 anni fa
purpitta
X 0 X

La cosa è più semplice di quello che sembra. Alla prima visualizzazione della pagina nulla è stato selezionato. Lo script PHP dovrà quindi generare (con dei semplici echo) i 3 select, il primo con tutte le regioni, gli altri due vuoti.

Selezionando una regione il javascript invia il form allo script di partenza. Questa volta lo script si accorge che è stata selezionata una regione (ad esempio con un IF sul $_POST['regione']) e di conseguenza effettua una query e con i risultati costruisce il secondo select (sempre con dei seplici echo)

Poiché non trova selezionata una prvincia (controllo che effettui con un IF su $_POST['provincia']) non viene effettuata nessuna query e la select dei comuni viene costruita senza elementi.

Se invece anche il secondo select è stato selezionato (IF($_POST['provincia'] != '')) allora verrà fatta una query per recuperare i comuni e con queste informazioni generare il terzo select (ancora una volta basta un echo all'interno del ciclo che effettua la fetch dei risultati della query)

Queste operazioni vanno effettuate ogni volta che viene mostrato il form, pertanto se devi effettuare altre operazioni perché il form prevede ulteriori eventi, ti basta gestire questi eventi dopo aver ricreato il form con i passaggi precedenti.

Il meccanismo si basa sul fatto che per ogni select la prima opzione deve essere vuota. A questa opzione vuota deve essere associato un valore nullo. Così se non viene selezionato nessun valore della select il relativo valore che riceverai $_POST sarà nullo.

 :bye:

risposto 11 anni fa
Gianni Tomasicchio
X 0 X

scusami se sono dura.....

ok.faccio esattamente quello che dici e nessun problema, mi funziona tutto.

Ho un pero':non mi sta bene il submit.

Quando si fa il submit di quella pagina io vengo reindirizzata ad un altra pagina e devo aver gia' selezionato tutto quello che volevo....

cioe' se devo scegliere sia regione che provincia quando faccio il submit devo averli tutti e due...non so se riesco a spiegarmi.

anche se dovessi fare il submit ogni volta che scelgo una regione(ad es.)ho bisogno comunque di distinguere il submit da chi e' fatto....se dal bottone o se dal <select>....questo posso farlo con il controllo sul $_POST?

risposto 11 anni fa
purpitta
X 0 X

Esatto, se controlli ogni volta i valori che ti arrivano dal POST ti accorgerai che il form è incompleto.

Dai dati che ti arrivano dal POST potrai costruire, in parte o completamente, i 3 select.

Se non ricevi valori consistenti dai 3 select (lo vedi con un IF sui 3 POST) allora si tratta di un submit fatto per recuperare le provincie o i comuni. Quando invece dal POST ti accorgi di avere regione, provincia e comune selezionati allora il submit è del bottone. In realtà potresti accorgerti se il bottone è stato premuto con $_POST['bottone'] ma comunque devi controllare che ci siano valori consistenti nei 3 select. Anzi, via javascript, ti conviene disabilitare il bottone fino a che i 3 select non siano stati selezionati

 :bye:

risposto 11 anni fa
Gianni Tomasicchio
X 0 X

scusami....ora ho capito!!!!Finalmente!

ero in confusione e non capivo...scusami ancora!

:bye:

risposto 11 anni fa
purpitta
X 0 X

ho buttato giù uno script. Non prevede query ma usa array statici. Basta modificarlo un po' per farlo funzionare con un DB.

<?php
error_reporting(E_ALL);
$regioni_opt = '';
$province_opt = '';
$comuni_opt = '';

// costruisco il primo select
$regioni_arr = array('Puglia','Basilicata','Molise'); // simula il risultato di una query

foreach ($regioni_arr as $regione)
{
   $selected = (isset($_POST['regione']) && $_POST['regione'] == $regione) ? 'selected="selected"' : '';
   $regioni_opt .= "<option value=\"$regione\" $selected>$regione</option>\n";
}

if($_POST)
{
   if($_POST['comune'] !='')
   {
      echo 'Tutti i dati sono stati inviati';
      exit();
   }

   if($_POST['regione'] != '')
   {
      // costruisco il secondo select
      $province_arr = array('Bari','Brindisi','Taranto','Lecce','Foggia'); // simula il risultato di una query

      foreach ($province_arr as $provincia)
      {
         $selected = ($_POST['provincia'] == $provincia) ? 'selected="selected"' : '';
         $province_opt .= "<option value=\"$provincia\" $selected>$provincia</option>\n";
      }
   }

   if($_POST['provincia'] != '')
   {
      // costruisco il secondo select
      $comuni_arr = array('Bari','Barletta','Trani','Molfetta'); // simula il risultato di una query

      foreach ($comuni_arr as $comune)
      {
         $comuni_opt .= "<option value=\"$comune\">$comune</option>\n";
      }
   }
}
costruisci_form($regioni_opt,$province_opt,$comuni_opt);



function costruisci_form($regioni, $province, $comuni)
{
   ?>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>Regione
    <select name="regione" id="regione" onchange="javascript: document.form1.submit();">
      <option value="">-- seleziona una regione --</option>
     <?php echo $regioni?>
    </select>
    </label>
  </p>
  <p>
    <label>Provincia
    <select name="provincia" id="provincia" onchange="javascript: document.form1.submit();">
      <option value="">---</option>
     <?php echo $province?>
    </select>
    </label>
  </p>
  <p>
    <label>Comune
    <select name="comune" id="comune"  onchange="javascript: document.form1.invia.disabled = (this.selectedIndex == 0) ? true : false;">
      <option value="">---</option>
     <?php echo $comuni?>
    </select>
    </label>
  </p>
  <p>
    <input name="invia" type="submit" id="invia" value="Invia" disabled="disabled" />
  </p>
</form>
<?php
}
?>

 :bye:

risposto 11 anni fa
Gianni Tomasicchio
X 0 X

grazie...sei un genio la provo e ti faccio sapere se incontro problemi ;)

risposto 9 anni fa
eros23
X 0 X

comunque, se cerchi nel forum troverai un altro script sempre fatto da me di recente che usa il database

 :bye:

risposto 9 anni fa
Gianni Tomasicchio
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda