Menu SELECT a tendina dinamico con effetto OnChange

[Flavio616]

Ciao a tutti,
avrei bisogno di riempire delle SELECT direttamente con dati presi da database MySQL senza refreshare la pagina, ma utilizzando il comando OnChange di Javascript (o simili).

In pratica in base alla selezione della prima select devo interrogare il database ed acquisire i dati per creare l'array da inserire nella seconda select. Stessa cosa succederà quando verrà selezionata la voce della seconda SELECT, che causerà il popolamento della terza SELECT.

Non ho problemi per la creazione degli array e la connessione al db, mentre ho un pò di problemi con il codice JavaScript; ho trovato qualche esempio in rete ma niente che faccia al caso mio... ne avevo trovato uno perfetto per il mio obiettivo dove veniva usato Ajax ma.. avrei da fare delle modifiche.
Ecco qua il link: www.mrwebmaster.it/ajax/articoli/menu-select-dinamici-ajax-php_803.html

Come fare ad aggiungere una SELECT dinamica e più che altro come fare ad aggiungere i VALUE="" alle OPTIONS allo script sopra? In quanto aggiungendo un pulsante "submit" ed inviando il form, nell'url non viene passato alcun parametro delle SELECT...

Ciao e grazie a tutti,

[artorius]

crea un file PHP che ritorna un array JS con i dati della select da riempire:

Metti di avere 3 select:

<select name="regione" onchange="populateSelect(this.options[this.selectedIndex].value, 'regione','citta')">
   <option value="lombardia">Lombardia</option>
   <option value="veneto">Veneto</option>
    .
    .
    .
   <option value="sicilia">Sicilia</option>
</select>
<select name="citta" onchange="populateSelect(this.options[this.selectedIndex].value, 'citta', 'via')"></select>
<select name="via"></select> 

A questo punto hai bisogno di uno script PHP da chiamare con Ajax ed una funzione che faccia la richiesta in modo corretto.

X il file, creo un file PHP che legge un parametro di query che sarà: citta={Città selezionata}&ottenere=via oppure regione={Regione selezionata}&ottenere=citta

$where = isset($_GET['citta']) ? 'citta' : isset($_GET['regione']) ? 'regione' : null;
$ottenere = $_GET['ottenere'];

if($ottenere && $where){
   //Metti che questo file crei un link reference al DB chiamato $db
   include("db/mysql_connect.php");

   $valore = $_GET[$where];
   //Ovviamente la tua query può essere molto diversa
   $query = "SELECT $ottenere FROM TABELLA_MASTODONTICA WHERE $where LIKE '$valore'"
   $result = mysql_query($query, $db);
   $ret = '';
   while($row = mysql_fetch_array($result))
   {
       $ret .="'".$row[$ottenere]."',";
   }

   if(strlen($ret) > 0){
      $ret = substr($ret, 0, strlen($ret) - 1);
   }
   echo "myArr = [$ret]";
} 

Poi chiami il file con una chiamata ajax, io uso sempre una libreria per questo, facciamolo con Prototypejs

var myArr = [];

function populateSelect(value, where, ottenere)
{
   var url = 'new_file.php'
   // notice the use of a proxy to circumvent the Same Origin Policy.

   eval("new Ajax.Request(url, { method: 'get', contentType : 'text/javascript', parameters : { "+where+" : '"+value+"', ottenere : '"+ottenere+"'}, onSuccess: function(transport) { eval(transport.responseText); populate('"+ottenere+"');}});");
}
            
function populate(selectName)
{
   var sel = document.getElementsByName(selectName)[0];
   var all = Element.descendants(sel);
   for(i = 0; i < all.length; i++)
   {      
      sel.remove(all[i]);
   }
   for(i = 0; i < myArr.length; i++)
   {
      var opt = document.createElement('option');
      opt.value = myArr[i];
      opt.appendChild(document.createTextNode(myArr[i]));
      sel.appendChild(opt);
   }
} 

Dovrebbe andare, con prototype-1.6.0.2.js, io l'ho testato e va senza problema su Firefox, Opera ed anche su Safari.

[Flavio616]

Grazie mille per la tua infinita gentilezza.
Lo provo e ti faccio sapere

Ah dimenticavo... come fare per vedere se ho prototype-1.6.0.2.js nelle librerie?!


Ciao a presto,

[Flavio616]

Ciao scusami... avrei un'altra domanda da farti: come fare per restituire un array, con il quale popolare la select, che abbia un diverso valore di VALUE?
In pratica una select dove il valore all'interno della <OPTION></OPTION> sia diverso da quello in VALUE=""

Esempio:

<select name="regione">
   <option value="emilia-romagna">Emilia Romagna</option>
   <option value="friuli-venezia-giulia">Friuli Venezia Giulia</option>
   <option value="trentino-alto-adige">Trentino Alto Adige</option>
</select> 

Ciao e grazie ancora!

[Flavio616]

Mi scuso per questo mio 3° messaggio di risposta, volevo avvertirti del mio "stato".
Penso di essere riuscito nell'intento di far estrapolare e quindi restituire dalla funzione un diverso valore di VALUE="" e <OPTION></OPTION>.

Il menu però non si popola e, dalla console degli errori di firefox, vedo che l'errore restituito è il seguente: "Ajax is not defined"
Presumo quindi di non avere prototype-1.6.0.2.js

Ho anche provato a scaricarlo da internet, uploaddarlo nella cartella dove risiedono gli altri file ed a richiamarlo nella pagina tramite
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
ma eventualmente non è così che si deve fare, in quanto non funziona neanche in questa maniera..

Attendo tue, ancora grazie
ciao!

[artorius]

In risposta alle tue domande
1- Allora, prototype è nella stessa cartella del file? Se è così, allora va bene lo script src="prototype..." altrimenti devi aggiornare il Path e sei sicuro che il file si chiami così? (può essere un'altra versione)
2- Se vuoi avere un value diverso dal testo dentro allora usa due array, dove c'è var myArr = []; fallo diventare var myArr = [], myArrValue = []; poi nel file PHP agiungi un echo "myArrValue = [$retValue]" dove $retValue sarà la stringa con i value.

[Flavio616]

Ciao,
il file è nella stessa cartella dei file ed il percorso è giusto; solamente che non funziona
Dalla console degli errori di Firefox vedo che ci sono numerosi avvisi riguardo funzioni nel file prototype-1.6.0.2.js

Io l'ho scaricato di qui: http://code.google.com/p/sctronlinux....2.js&can=2&q=

Puoi dirmi se il file che ho scaricato è ok?

Ciao e grazie di nuovo,

[artorius]

si scarica qui http://www.prototypejs.org/assets/20...ype-1.6.0.2.js

[Flavio616]

Sì era lo stesso file allora... ho scaricato quello che mi hai dato tu, uploaddato nella cartella ma... gli avvisi della console degli errori di Firefox sono sempre gli stessi e lo script non popola le select...
Gli avvisi che mi riporta appena carica la pagina sono veramente troppi, non ce la faccio a riportarli tutti; quelli che invece mi indica quando provo a selezionare una voce del primo menu ecco che sono i 3 seguenti:


Avviso: reference to undefined property response.headerJSON
File sorgente: http://www.nomesito.com/prototype-1.6.0.2.js
Riga: 1308

Avviso: reference to undefined property response.headerJSON
File sorgente: http://www.nomesito.com/prototype-1.6.0.2.js
Riga: 1309

Avviso: reference to undefined property responder[callback]
File sorgente: http://www.nomesito.com/prototype-1.6.0.2.js
Riga: 1141

[artorius]

non è pubblicato da qualche parte? così che posso vederlo