<Update/ Populate DropDown using Ajax ⁄ >

body{font-family: Tahoma, Verdana, Arial;font-size: 11px;color: #000;}
 
#div_main{float: left}
 
h3{font-family: Consolas, Tahoma, Arial;font-size: 14px;font-weight: bold;}
 
select{background-color: #FFFFD4;color: #000;border: 1px solid #004080;}

/**
* Static Class Events
* Manage Events
*/
Events = function(){}
 
/**
* Add Event
*
* Full credits to (I just made a few mods):
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.AddEvent = function(obj, type, fn){
  if(!obj) return;
 
  this.RemoveEvent(obj, type, fn);
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  }
  else {
    if (obj.attachEvent) {
      obj["e" + type + fn] = fn;
      obj[type + fn] = function(){
        obj["e" + type + fn](window.event);
      }
      obj.attachEvent("on" + type, obj[type + fn]);
    }
  }
}
 
/**
* Remove Event
*
* Full credits to (I just made a few mods):
* http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
*
* @param Object
* @param Object
* @param Object
*/
Events.RemoveEvent = function(obj, type, fn){
  if (obj.removeEventListener) {
    try{obj.removeEventListener(type, fn, false);} catch(e){}
  }
  else{
    if (obj.detachEvent) {
      obj.detachEvent("on" + type, fn);
      obj[type + fn] = null;
      obj["e" + type + fn] = null;
    }
  }
}
 

/**
* Static Class Misc, contains some 
* miscellaneous methods/ settings
*/
Misc = function(){}
 
//file that will process our requests
Misc.ServerFile = "ajax.php";
 
/**
* Hack IE to avoid HTTP Get cache problems
*
* @param String
*/
Misc.AntiCacheRand = function(aurl){
  var rnd = encodeURI(Math.random());
  aurl += (aurl.indexOf("?") >= 0) ? "&foo=" + rnd : "?foo=" + rnd;
 
  return aurl;
};
 
/**
* Activate/Deactive loading indicator that will
* be shown while communication between client-server-client
* is in process/ progress
*
* @param String Div Name
*/
Misc.MsgLoading = function(div_name){
  var div = $(div_name);
 
  if (div.style.display != "block") {
    var msg_loading = "Loading ...";
    var img = new HTMLControl("loading_animation");
    div.innerHTML = img.DoImage("loading.gif", msg_loading, 16, 16);
    div.style.display = "block";
  }
  else {
    div.style.display = "none";
  }
};
 
/**
* Create HttpRequest.
* This request allow us to communicate with the server
*
* @return HttpRequest
*/
Misc.CreateHttpRequest = function(){
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
 
    if (http_request.overrideMimeType) {
      http_request.overrideMimeType('text/html');
    }
  }
  else
  if (window.ActiveXObject) { // IE
    try {http_request = new ActiveXObject("Msxml2.XMLHTTP");}
    catch (e) {
      try {http_request = new ActiveXObject("Microsoft.XMLHTTP");}
      catch (e) {}
    }
  }
 
  if (!http_request) {
    alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
  }
 
  return http_request;
};

/**
* This Class's responsible for building HtmlControls
*
* note: only a few HtmlControls are implemented
*/
 
/**
* @author pedrocorreia.net
* @param String Object Name
*/
function HTMLControl(id){
  this.id = id;
 
  /**
  * Private Method
  * Generate attribute markup for "id" and "name"
  *
  * @return String
  */
  var _GenerateID = function(){return " name='" + id + "' id='" + id + "' ";};
 
  /**
  * Private Method
  * Add element (option) to dropdown
  *
  * @param String
  * @param String
  *
  */
  var _DropdownListAddOption = function(value, description){
    $(id).options.add(_DropdownListCreateOption(value, description));
  }
 
  /**
  * Private Method
  * Create dropdown element (option)
  *
  * @param String
  * @param String
  */
  var _DropdownListCreateOption = function(value, description){
    var ddlOption = document.createElement("option");
    ddlOption.value = value;
    ddlOption.text = description;
 
    return ddlOption;
  }
 
  /**
  * Private Method
  * Clear dropdown itens
  */
  var _DropdownListClear = function(){$(id).options.length = 0;}
 
  /**
  * Build Image
  *
  * @param String Source
  * @param String Title
  * @param int Width
  * @param int Height
  * @return String
  */
  this.DoImage = function(src, title, width, height){
    title = " title='" + title + "' alt='" + title + "' ";
    return "<img src='" + src + "' width='" + width + "' height='" + height + "' " + _GenerateID() + title + " />";
  };
 
  /**
  * Build Dropdown
  *
  * @param Object
  *
  */
  this.DoDropdownList = function(arrOptions){
    var arr = eval(arrOptions);
 
    _DropdownListClear();
    var ddl = $(this.id);
    var i, value, description;
    var count = arr.options.length;
 
    for (i = 0; i < count; i++) {
      value = arr.options[i].value;
      description = arr.options[i].description;
 
      _DropdownListAddOption(value, description);
    }
  }
};
 
/**
* Get HtmlControl reference
*
* note: this is a static method, HtmlControl class
* doesn't have to be instantiated
*
* @param String
*/
$ = function(element){return document.getElementById(element);};
 

/**
* Class Ajax's responsible for request and 
*
* @author: pedrocorreia.net
*/
Ajax = function(){};
 
//Div that contains the loading indicator
Ajax.DivLoadingName="div_loading";
 
/**
* Update Dropdown
*/
Ajax.UpdateDropdownList = function(ddListName,ddSubListName){
  Misc.MsgLoading(this.DivLoadingName); //show loading indicator
 
  var ddListValue = $(ddListName).value;
  var url = Misc.AntiCacheRand(Misc.ServerFile + "?action=get_options&value=" + ddListValue);
 
  var http_request = Misc.CreateHttpRequest();
 
  http_request.onreadystatechange = function(){
    var state = http_request.readyState;
 
    //request completed and answered sucessfully
    if (state == 4 && http_request.status == 200) {
      var result = http_request.responseText;
 
      var ddSubList = new HTMLControl(ddSubListName);
 
      ddSubList.DoDropdownList(eval(result));
 
      //add event onchange to the dropdown, so that can be triggered next time
      //we select another option
      Events.AddEvent(ddListName, "change", function (){Ajax.UpdateDropdownList(ddListName,ddSubListName);});
      Misc.MsgLoading(Ajax.DivLoadingName); //hide loading animation
    }
  }
 
  http_request.open("GET", url, true);
  http_request.send(null);
}
 

<?php
$action=$_GET["action"];
 
if($action=="get_options"){
  $value=$_GET["value"]; //get the country we'll process
 
  if($value=="japan"){
    $result = "
      ({ 
        'options': [
          {'value': '','description': '(pick an item)'}, 
          {'value': 'aikido','description': 'Aikido'}, 
          {'value': 'kendo','description': 'Kendo'},
          {'value': 'sumo','description': 'Sumo'},
          {'value': 'shurikenjutsu','description': 'Shurikenjutsu'}
        ]
      });
    ";
  }
 
  else if($value=="china"){
    $result = "
      ({ 
        'options': [
          {'value': '','description': '(pick an item)'}, 
          {'value': 'tai_chi_chuan','description': 'Tai chi chuan'}, 
          {'value': 'shaolin_kung_fu','description': 'Shaolin kung fu'},
          {'value': 'shuai_jiao','description': 'Shuai Jiao'},
          {'value': 'wing_chun','description': 'Wing Chun'}
        ]
      });
    ";
  }
 
  else if($value=="korea"){
    $result = "
      ({ 
        'options': [
          {'value': '','description': '(pick an item)'}, 
          {'value': 'taekwondo','description': 'Taekwondo'}, 
          {'value': 'hapkido','description': 'Hapkido'},
          {'value': 'taekyon','description': 'Taekyon'},
          {'value': 'soobak','description': 'Soobak'}
        ]
      });
    ";
  }
  else{
    $result = "
      ({ 
        'options': [
          {'value': '','description': '(please, pick a country)'} 
        ]
      });
    ";
  }
}
 
echo $result; //return answer
?>

init = function (){
  var arrOptions = {
    "options": [
      {"value": "","description": "(please, pick a country)"}, 
      {"value": "japan","description": "Japan"}, 
      {"value": "china","description": "China"},
      {"value": "korea","description": "Korea"}
	  ]
  };
 
  var dropdownlist = "ddList";
  var dropdown_sublist = "ddSubList";
 
  var ddList = new HTMLControl(dropdownlist);
  ddList.DoDropdownList(arrOptions);
  Events.AddEvent($(dropdownlist), "change", function (){Ajax.UpdateDropdownList(this.id,dropdown_sublist);});
}
 
Events.AddEvent(window, "load", init);

<html>
  <head>
    <script type="text/javascript" src="Misc.js"></script>
    <script type="text/javascript" src="HtmlControl.js"></script>
    <script type="text/javascript" src="Events.js"></script>
    <script type="text/javascript" src="Ajax.js"></script>
    <script type="text/javascript" src="Init.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
  </head>
  <body>
    <h3>Please pick a country and get to know some of its Martial Arts.</h3>
 
    <div id="div_main">
      Country: <select name="ddList" id="ddList"></select>
      Martial Art:
      <select name="ddSubList" id="ddSubList">
        <option>(please, pick a country)</option>
      </select>
    </div>
    <div id="div_loading"></div>
  </body>
</html>