Hi everyone,

Im very new to the ajax world and have been looking at using jquery for most of my Ajax work. However I am trying figure out how i would poppulate a select box with an ajax call.

Would anyone have a super simple function or script that will poppulate a select box without using a framework of any sort ?

All i need is for it to extract pull a list from my server

Any ideas would be greatly appreciated.

9 Years
Discussion Span
Last Post by essential

This demo will allow you to populate the current field with a lists of options from another page. You can also switch back from the previous page and gain the default list (vise versa).
Here's the code for the test.html which is currently set as the default list, on the requested page:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Populating the DropDown list Using AJAX</title>
<script type="text/javascript">
// <![CDATA[

var xmlData, dropDown, list, x;

var ajax = function() {

function populate() {
/* if ( xmlData.readyState !== 4 ) return;
    if ( xmlData.status !== 200 ) {  alert("\nUnable to parse XML data!"); return; }
// Not necessarily needed if you are working off-line */
dropDown = xmlData.responseXML.getElementsByTagName(list.nodeName.toLowerCase())[0];

lists = dropDown.getElementsByTagName("option");
count = lists.length;

for ( x = 0; x <= count; x++ ) { list.options[count] = null;
  list.remove( x );
  list.add( new Option( lists[x].childNodes[0].nodeValue, lists[x].getAttribute("value")),  x );  

function loadXMLData( url ) {
xmlData = null;
   if ( window.XMLHttpRequest ) {
         xmlData = new XMLHttpRequest();
   } else if ( window.ActiveXObject ) {
      try {
          xmlData = new ActiveXObject("Msxml2.XMLHTTP");
      } catch( e ) {
          xmlData = new ActiveXObject("Microsoft.XMLHTTP");
   if ( xmlData !== null ) {
      xmlData.onreadystatechange = populate; 
      xmlData.open("GET", url, true);
      xmlData.send( null );
   } else {
      alert("\nYour browser does not support AJAX Request!"); 

function addOption( ids ) {
list = ( document.getElementById ) ? document.getElementById( ids ) : document.all[ids];
    loadXMLData( list.options[list.selectedIndex].value );

return { 
listed : addOption };

// ]]>
<div id="output"></div>
<form id="frm" action="*" onsubmit="return false;">
<select id="sel" name="sel" size="1" onchange="ajax.listed(this.id);">
<option value="">AJAX Demo</option>
<option value="./request.html">Load Page1</option>

and here's the code of requested page (request.html).

<title>Test Page</title>
<select id="request" name="request" size="1">
<option value="test.html">Option 1</option>
<option value="./test.html">Option 2</option>
<option value="test.html">Option 3</option>
<option value="test.html">Option 4</option>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.