• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

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?

1 Solution
Put this in the head section :
<script language="javascript" type="text/javascript">
	function runAQueryToFillADIVWithContentFromADatabase(PID) {
		if(PID.length==0) {
			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);

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
EMB01Author Commented:
Perfect, very simple implementation.
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.

Join & Write a Comment

Featured Post

Train for your Pen Testing Engineer Certification

Enroll today in this bundle of courses to gain experience in the logistics of pen testing, Linux fundamentals, vulnerability assessments, detecting live systems, and more! This series, valued at $3,000, is free for Premium members, Team Accounts, and Qualified Experts.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now