Dynamically Populate Select List by Ajax

Many times, when your data is based on one parameter then you have to submit your form with user given input for getting the data based on given input by user. This increase waiting time for user completing input and adds extra request/response trip also. For this kind of situation, Ajax has provided great choice to site owner.
So, here we will create dynamic list of cities based on selected country by user. As soon as user selects their choice of country they will get list of cities of the selected country.
This HTML page will be provided to user for selecting country-
Page::dynamic_city_state.php

<?php
print_r($_POST); // print all the post-ed data. For testing
?>
<html>
<head>
 <title>Country City List</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <script src="ajax_req.js" type="text/javascript"></script>
</head>
<body>
<form method="post">
<!-- Ajax call to city page -->
<select name="country" onchange="htmlData('city.php', 'ch='+this.value)" />
  <option value="#">-Select-</option>
  <option value="India">India</option>
  <option value="USA">USA</option>
</select>
<div id="txtResult"> <select name="cityList"><option></option></select> </div>
<input type="submit" />
</form>
</body>
</html>

Familiar JavaScript Ajax Script will be used for dynamically populating select list! -

page:ajax_req.js


function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}
function stateChanged()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
           document.getElementById("txtResult").innerHTML= xmlHttp.responseText;
   }
   else {
           //alert(xmlHttp.status);
   }
}
// Will populate data based on input
function htmlData(url, qStr)
{
   if (url.length==0)
   {
       document.getElementById("txtResult").innerHTML="";
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }
   url=url+"?"+qStr;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}
This PHP page will be called by Ajax-
page::city.php

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
// List of cities for India
if ($_GET['ch'] == 'India') {
   ?>
<select name="cityList">
<option value="Mumbai">Mumbai</option>
<option value="Delhi">Delhi</option>
<option value="Bangalore">Bangalore</option>
<option value="Patna">Patna</option>
</select>
<?php
}
// List of cities for USA
if ($_GET['ch'] == 'USA') {
   ?>
<select name="cityList">
<option value="Albama">Albama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Florida">Florida</option>
</select>
<?php
}
?>

If you came here for country->City and "IP" mapping then your destination is this: Country/City IP mapping

  • # 1 - by Joel Ramos

    I am doing something wrong. I’ve tested your code and it works fine. But the code I am using, based on yours, once I change the value of the first select, the second appears in the page correctly, but when I check Page Info it’s not there…

  • # 2 - by Joel Ramos

    I am doing something wrong. I’ve tested your code and it works fine. But the code I am using, based on yours, once I change the value of the first select, the second appears in the page correctly, but when I check Page Info it’s not there…

  • # 3 - by Nirmal Raj

    This does not works in IE7 for some weird reason. I tested in firefox and opera it works perfectly but not in IE

  • # 4 - by Nirmal Raj

    This does not works in IE7 for some weird reason. I tested in firefox and opera it works perfectly but not in IE

  • # 5 - by Mike_S

    Hi Satya,

    This is cool stuff !, *almost* exactly what I was looking for 😉

    What I want to do is to populate a textarea with whatever gets chosen from the select box, i.e. so I can have a list of words available to insert at the current point in the textarea (or anywhere in the textarea, if the cursor thing is a big problem).

    I started to modify your code, specifically the city.php file, where I tried a variety of things, but nothing’s working yet.

    This is probably something very simple for you to do, if you can share the solution, that would be great.

    Mike

Comment pages
1 2 3 4 5 8 200
Comments are open for an year period. Please, write here on Facebook page.