Liste déroulante avec affichage d'un tableau

Bonjour, je suis un jeune développeur, et j'ai récemment commencé la création d'un site web. cependant, je me retrouve confronté a quelques problèmes, notament l'AJAX...
Je souhaiterais que lorsqu'un membre choisit une date, dans une liste déroulante, il ait le choix dans les lieux des randonnées possibles, pour ensuite voir les inscrits aux randonnées. Comment peut on faire ?J'ai essayé ceci, mais cela ne fonctionne pas, et après avoir cherché pendant des heures, je ne trouve pas comment faire ....

<?php

	session_start();
	
	// Non identifié
	if(!isset($_SESSION['LOGIN']))
	{
		$_SESSION['LOGIN']='0';
		include('index_refus.html');
		exit();
	}

	// Ajout des menus
	if(mb_eregi($_SESSION['LOGIN'],"admin"))
	{
		include('menuadmin.php');
	}
	else
	{
		include('menuprinc.php');
	}

	if (isset($_POST['nom_cheval']) && isset($_POST['SIRE']))
	{
		$connexion = mysql_connect("localhost","root","");
		if (!$connexion)
		{
			// Si la connexion à échoué
			echo "Erreur: Problème de connexion à la base de données.";
			exit();
		}
		else
		{
			
		}
	}

?>

<html>
	<head>
	<title>Liste des inscrits</title>
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<script type="text/javascript" src="oXHR.js"></script>
<script type="text/javascript">
<!-- 

function request(oSelect) {
	var value = oSelect.options[oSelect.selectedIndex].value;
	var xhr   = getXMLHttpRequest();
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			readData(xhr.responseXML);
			document.getElementById("loader").style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader").style.display = "inline";
		}
	};
	
	xhr.open("POST", "liste_choix.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("IdEditor=" + value);
}

function readData(oData) {
	var nodes   = oData.getElementsByTagName("item");
	var oSelect = document.getElementById("date_rando");
	var oOption, oInner;
	
	oSelect.innerHTML = "";
	for (var i=0, c=nodes.length; i<c; i++) {
		oOption = document.createElement("option");
		oInner  = document.createTextNode(nodes[i].getAttribute("lieux_rando"));
		oOption.value = nodes[i].getAttribute("num_rando");
		
		oOption.appendChild(oInner);
		oSelect.appendChild(oOption);
	}
}
//-->
</script>
</head>

<body>
	<div id="Randonnées">
		<p id="Date">
			<select id="date_rando" onchange="request(this);">
				<option value="none">Selection</option>
				<?php					
					mysql_connect("localhost","root","");
					mysql_select_db(CVO);
					
					$query = mysql_query("SELECT * FROM randonnee ORDER BY date_rando");
					while ($back = mysql_fetch_assoc($query)) {
						echo "\t\t\t\t<option value=\"" . $back["LIEUX_RANDO"] . "\">" . $back["LIEUX_RANDO"] . "</option>\n";
					}
				?>			
			</select>
			<span id="loader" style="display: none;"><img src="images/loader.gif" alt="loading" /></span>
		</p>
		<p id="Lieux">
			<select id="lieu_rando"></select>
				<?php					
					mysql_connect("localhost","root","");
					mysql_select_db(CVO);
					
					$query = mysql_query("SELECT * FROM randonnee WHERE ORDER BY date_rando");
					while ($back = mysql_fetch_assoc($query)) 
					{
						echo "\t\t\t\t<option value=\"" . $back["NUM_RANDO"] . "\">" . $back["LIEUX_RANDO"] . "</option>\n";
					}
				?>
		</p>
	</div>
</body>
</html>

Je vous remercie pour votre aide !

Webmaster Hub: Liste déroulante avec affichage d'un tableau - Webmaster Hub