Menu SELECT a tendina dinamico con effetto OnChange

[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.