[PHP/JS/XHTML]= AJAX j'y arrive pas :(

Bonjour,
j'ai un petit souci concernant l'affichage de mon script php via AJAX, je m'explique:

Je dispose d'une fiche d'inscription avec plusieurs champs a remplir et d'une base de donnée permettant de gérer les inscription.
Sur ma fiche d'inscription il y a plusieurs champ: Clients_Nom, Client_Prenom, Eleve_Nom, Eleve_Prenom etc...
Seulement un Client peut vouloir inscrire plusieurs Enfants donc plusieurs élèves, j'ai donc trouvé un script en Java script permettant d'ajouter des champ en cliquant sur un lien "ajouter un élève".

Seulement un de mes champ est une liste déroulante PHP :

<?php
$connect = mysql_connect("localhost","root","");
mysql_select_db("SocietéX",$connect);
if($connect)
  {
  $req="select Classe_Classe from Classe;";
  $result=mysql_query($req);
  echo"<select name='Classe_Classe'>";
  while($ligne=mysql_fetch_row($result))
    { 
      echo"<option value=$ligne[0]>$ligne[0]</option>";
    }
    echo"</select>";
}
?>

Ce qui m'oblige a utiliser AJAX seulement je me suis lancer dans Ajax depuis moins d'une semaine et j'avoue que parfois je suis totalement perdu.

voici le script que j'ai réussi a faire mais biensur il ne fonctionne pas je sais ou ça va pas mais je ne vois pas comment faire différemment.

<script>

function create_eleve(i) {

var xhr;
if(window.XMLHttpRequest || window.ActiveXObject) {
        if(window.XMLHttpRequest) {
                xhr = new XMLHttpRequest(); 
        }
        else { 
                try {
                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch(e) {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
        }
}
else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return;
}
xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                        return(xhr.responseText); 
                }
        } 
        
        xhr.open("GET", "ListeDeroulanteClasse.php", true);
        xhr.send(null);

var eleve = i - 2; 
var i2 = i + 1;

document.getElementById('leschamps_'+i).innerHTML = '<table width="90%" align="center">etc...ce sont les nouveaux champ affichés';
document.getElementById('leschamps_'+i).innerHTML += 'Td etc...(pour plus de lisibilité je coupe le passage)';
document.getElementById('leschamps_'+i).innerHTML += '<table width="90%" align="center"><tr><td class="Champs" width="15%"><font color="#FFFFFF" >Classe:</font></td><td width="35%">';

document.getElementById('leschamps_'+i).innerHTML += 'show? // xhr.responseText';// c'est ici que j'aimerai faire apparaitre ma liste déroulante php mais je n'y arrive pas :'(

document.getElementById('leschamps_'+i).innerHTML += (i <= 4) ? '<br /><span id="leschamps_'+i2+'"><a href="javascript:create_eleve('+i2+')">Ajouter un élève</a></span>' : '';


}
</script>

ici mon code html affichant les champs.
<a href="javascript:create_eleve(4)">Ajouter un élève</a>
<span id="leschamps_4"></span> c'est entre les span que s'affiche mes nouveau champs.

Et voici le contenu de ma page ListeDeroulanteClasse.php:

<?php
$connect = mysql_connect("localhost","root","");
mysql_select_db("Classe",$connect);
if($connect)
  {
  $req="select Classe_Classe from Classe;";
  $result=mysql_query($req);
  echo"<select name='Classe_Classe'>";
  while($ligne=mysql_fetch_row($result))
  {
    echo"<option value=$ligne[0]>$ligne[0]</option>";
  }
  echo"</select>";
}
?>

==> la même liste déroulante que celle de ma page source.


Donc mes nouveaux champs s'affichent correctement mais ma deuxième liste déroulante elle est perdu quelque part :'(