ajaxCFC query retrieval example using DWRUtil.addOptions
Contacts:
Selected Contact ID:
Client Side Script
<script type='text/javascript'>_ajaxConfig = {'_cfscriptLocation':'query.cfc', '_jsscriptFolder':'../js'};</script>
<script type='text/javascript' src='../js/ajax.js'></script>

<script type="text/javascript">
	function doQuery()	{
		// send data to CF
		DWRUtil.useLoadingMessage();
		DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'queryAll', null, doQueryResults);
	}
	
	// call back function
	function doQueryResults (r) {
		DWRUtil.removeAllOptions("contactsSelect");
		var getValue = function (thisRow) {
			return thisRow.id;
		}
		var getText = function (thisRow) {
			return thisRow.fname + ' ' + thisRow.lname;
		}
		
		DWRUtil.addOptions("contactsSelect", r, [getValue, getText], null);
		updateContactID();
	}
	
	//clear Select Box
	function doClear() {
		DWRUtil.removeAllOptions("contactsSelect");
		DWRUtil.setValue("contactID","");
	}

	//update contactID Box
	function updateContactID() {
		SelectedContactID = DWRUtil.getValue("contactsSelect");
		DWRUtil.setValue("contactID",SelectedContactID);				
	}
</script>

<fieldset>
	<legend>ajaxCFC query retrieval example using DWRUtil.addRows</legend>
	<table>
		<tr>
			<td>
				<input type="button" name="btnClear" value="Clear Select" onclick="doClear()"> 
				<input type="button" name="btnFill" value="Fill Select" onclick="doQuery()"> 
			</td>
		</tr>
		<tr>
			<td>
				Contacts: <select name="contactsSelect" id="contactsSelect" />
			</td>
		</tr>
		<tr>
			<td>
				Selected Contact ID: <input type="text" name="contactID" id="contactID" />
			</td>
		</tr>
	</table>
</fieldset>
	
Server Side Script
<cfcomponent extends="ajax">
	
	<cfscript>
		// didn't want to rely on a real db, so I defined manually the query here
		variables.q = queryNew('id,fname,lname,phone,location');
		queryAddRow(q,1);
		querySetCell(q, 'id', 1);
		querySetCell(q, 'fname', 'Rob');
		querySetCell(q, 'lname', 'Gonda');
		querySetCell(q, 'phone', '954-555-5555');
		querySetCell(q, 'location', 'Florida');

		queryAddRow(q,1);
		querySetCell(q, 'id', 2);
		querySetCell(q, 'fname', 'Steve');
		querySetCell(q, 'lname', 'Smith');
		querySetCell(q, 'phone', '305-555-5555');
		querySetCell(q, 'location', 'Miami');

		queryAddRow(q,1);
		querySetCell(q, 'id', 3);
		querySetCell(q, 'fname', 'John');
		querySetCell(q, 'lname', 'Dow');
		querySetCell(q, 'phone', '212-555-5555');
		querySetCell(q, 'location', 'New York');
	</cfscript>

	<cffunction name="queryAll" output="no" access="private">
		<cfreturn q />
	</cffunction>

</cfcomponent>
	
description This example shows how to populate a select element with information retrieved from a query. It uses DWRUtil.addOptions to automatically populate the select element.

I created a query in ColdFusion so you do not depend on an external database to run this example. You should be able to easily replace the one I created with a real database.