Ajax Select finamiche

[linuxit]

Devo implementare un form che permette di selezionare all'utente 3 campi rispettivamente

Provincia->Comune->Zona

Ho trovato in rete uno script ajax-php che comprende la selezione di 2 campi, infatti creando il database Province->Comuni funziona su IE7 anche se comunque non riesco ad inviare i dati delle select al DB.

Il problema nasce se cerco di inserire la terza select, ho cercato un bel po in rete senza successo, lo script è formato da 2 pagine più la index:
lists.js e request.php.
I sorgenti del codice modificato sono questi:

lists.js

var xmlHttp = getXmlHttpObject();

function loadList(tb, id){
xmlHttp.open('GET', '/system/request.php?table='+tb+'&id='+id, true);
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.send(null);
}
function addOption(select, value, text) {
	//Aggiunge un elemento <option> ad una lista <select>
	var option = document.createElement("option");
	option.value = value,
	option.text = text;
	try {
		select.add(option, null);
	} catch(e) {
		//Per Internet Explorer
		select.add(option);
	}
}
function getSelected(select) {
	//Ritorna il valore dell'elemento <option> selezionato in una lista
	return select.options[select.selectedIndex].value;
}
function stateChanged() {
	if(xmlHttp.readyState == 4) {
		//Stato OK
		if (xmlHttp.status == 200) {
			var resp = xmlHttp.responseText;
			
			if(resp) {
				//Le coppie di valori nella striga di risposta sono separate da ;
				var values = resp.split(';');
				//Il primo elemento è l'ID della lista.
				var listId = values.shift();
				var select = document.getElementById(listId);
				//Elimina i valori precedenti
				while (select.options.length) {
					select.remove(0);
				} 
				
				if(listId == 'province') {
					addOption (select, 0, 'Seleziona Provincia');
				}
				
				var limit = values.length;
				
				for(i=0; i < limit; i++) {
					var pair = values[i].split('|');
					//aggiunge un elemento <option>
					addOption(select, pair[0], pair[1]);
				}
			}
		} else {
			alert(xmlHttp.responseText);
		}
	}
}

function getXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}

----------------------------------------------------------------------------------------

Il sorgente di request.php è questo:

<?php
/*File usato dalla funzione select dinamica ajax*/

require 'dbconfig.php';
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD) or die;
mysql_select_db(DB_NAME) or die;
//I valori in input vanno verificati
//id deve essere un valore numerico
$pid = (int)$_REQUEST['id'];
//maschera  eventuali caratteri speciali in table 
$tb = mysql_real_escape_string($_REQUEST['table'], $conn);

switch($tb) {
    case 'province':
        $sql="SELECT idprovincia, nomeprovincia FROM `$tb` order by nomeprovincia";
        break;
    case 'comuni':
        $sql="SELECT idcomune, nomecomune FROM `$tb` WHERE idprovincia=$pid order by nomecomune";
        break;
    case 'zone':
        $sql="SELECT idcomune, zona FROM `$tb` where idcomune=$pid order by zona";
        break;
}
//Il primo elemento della risposta è il nome della tabella (= attributo ID del tag select)
$out="$tb;";
if($result = mysql_query($sql, $conn)) {
    while ($row = mysql_fetch_row($result)) {
        $out .= $row[0] . '|' . $row[1] . ';';
    }
}
//Rimuove il carattere ; in coda
echo rtrim($out, ';');


?>

----------------------------------------------------------------------------------------
Il codiche che uso nella pagina html è questo:

<td><select name="province" id="prov" onchange="loadList('comuni', getSelected(this))"> </select>

<td><select name="comuni" id="citta" onchange="loadList('zone', getSelected(this));"></select></td>

<td><select name="zona" id="zona"> </select></td>

----------------------------------------------------------------------------------------
Questo codice mi restituisce l'errore:
Necessario Oggetto (line 37) lists.js

Qualcuno è così buono da aiutarmi ? Probabilmente è un errore banale dovuto alla mia inesperienza.

[linuxit]

Up pls sto impazzendo !!!

[cavicchiandrea]

Io con un problema simile (con ie 7 non mi caricava le option con ff andava benissimo) ho risolto ricreando le select complete lato server, dato che ho visto che manipolare il DOM con ie e più ingarbugliato, è solo una strada poi vedi tu.

[linuxit]

Grazie per l'attenzione, il punto è che lo script funziona benissimo con 2 select, il problema è che non capisco bene quello che fa lo script in quanto non sono molto pratico di php e java quindi non riesco ad implementare correttamente la terza select.
In giro ho visto altri script che dovrebbero funzionare (non li ho testati) con 3 select ma sono molto ingarbugliati e comunque nel caso ho bisogno di implementare una quarta select non capirei come fare.

Ai fini pratici, lo scopo di questo tentativo, è anche quello di capire come funziona lo script.

Credo che con la parte php non ci sono problemi in quanto si limita ad effettuare solo delle query prendendo come parametro id, l'id della precedente select e lo divide in 2 parametri separati.

Lo script java in effetti non lo comprendo molto, ma dall'errore che restituisce posso intuire che il problema sta nella creazione dell'oggetto che dovrebbe essere getXmlHttpObject.

Oltre purtroppo non sono arrivato.