Member Avatar for thenamenoonehas

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.

  • 2 Contributors
  • 1 Reply
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for 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"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<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 };
}();

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

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

<html>
<head>
<title>Test Page</title>
</head>
<body>
<form>
<div>
<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>
</select>
</div>
</form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.