How to do an AJAX Dropdown

I need to have database-driven dropdown menu, like this one:
echo "<select>";
for($i=0; $i<$num;$i++){
   echo "<option value=\"".trim($row[$i])."</option>\n";
}
echo "</select>";

Open in new window

When an option is selected, I need to run a query to fill a DIV with content from a database.  Can anyone help me with this?


LVL 14
EMB01Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
Put this in the head section :
<script language="javascript" type="text/javascript">
	function runAQueryToFillADIVWithContentFromADatabase(PID) {
		if(PID.length==0) {
			document.getElementById("DIV_ID").innerHTML="";
			return true;
		}
		var xmlhttp;
		if(window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if(xmlhttp==null) {
			alert("your browser don't support Ajax");
		}
		xmlhttp.onreadystatechange = function() {
			if(xmlhttp.readyState==4 && xmlhttp.status==200) {
				document.getElementById("DIV_ID").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","getDatabaseDrivenDropdownMenu.php?pid=" + PID,true);
		xmlhttp.send();
	}
</script>

Open in new window


your div (to fill with the dynamic dropdown):
<div id="DIV_ID"></div>

your first dropdown need to have :

<select onchange="runAQueryToFillADIVWithContentFromADatabase(this.value)">

the value of the option (this.value) can be used by the server side (your php script to select/filter some of the data and build the option)

Need more infos?
Take your time to read this tuto for example : http://www.w3schools.com/ajax/default.asp
0
 
EMB01Author Commented:
Perfect, very simple implementation.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.