Perhaps, this is what you're looking for.
searchPage.cfm
=============
<style type="text/css">
.mainhead{
width:800px;
}
.outset {
border-style:outset;
border-color:#FF4000;
background-color:#F2F2F2;
width : 800px;
}
.multselect{
width:250px;
height:150px;
}
</style>
<script type="text/javascript">
function getServiceList(searchBy)
{
var xmlhttp;
if (searchBy.length==0)
{
document.getElementById("serviceListBox").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("serviceListBox").innerHTML=xmlhttp.responseT ext;
}
}
xmlhttp.open("GET","http://localhost:8888/test/servicelists.cfc?method=getServiceLists&cri teria="+searchBy,true);
xmlhttp.send();
}
</script>
<table class="mainhead">
<tr align="center">
<td></td>
</tr>
</table>
<table class="mainhead">
<tr align="left">
<td>Search Criteria:</td>
<td> </td>
</tr>
</table>
<table class="outset">
<tr>
<td>Required Fields</td>
<td>Optional Fields</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td>Business:
<select name="business" id="business">
<option value=""></option>
<option value="b1">Business1</option>
<option value="b2">Business2</option>
<option value="b3">Business3</option>
</select>
</td>
<td>Account No:
<input type="text" name="accountNumber" id="accountNumber">
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td>Starting Date:
<input type="text" name="startingDate" id="startingDate">
</td>
<td>Search By:</td>
</tr>
<tr>
<td> </td>
<td><input type="radio" name="searchByServiceNameOrAgent" id="searchByServiceNameOrAgent" value="searchByServiceName" onclick="getServiceList(this.value)">Service Name</td>
</tr>
<tr>
<td> </td>
<td><input type="radio" name="searchByServiceNameOrAgent" id="searchByServiceNameOrAgent" value="searchByAgent" onclick="getServiceList(this.value)">Agent</td>
</tr>
<tr>
<td>Ending Date:
<input type="text" name="startingDate" id="startingDate">
</td>
<td>Use Ctrl key to select muliple services</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td> </td>
<td>
<select name="serviceListBox" id="serviceListBox" size="3" multiple class="multselect">
<option value="one"> one </option>
<option value="two"> two </option>
<option value="three"> three </option>
<option value="four"> four </option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" id="submit" value="SUBMIT"></td>
</tr>
</table>
servicelists.cfc
============
<cfcomponent output="false">
<cffunction name="getServiceLists" access="remote" returntype="string" returnformat="plain">
<cfargument name="criteria" required="true" type="string">
<cfset var option_string = '' />
<cfif arguments.criteria eq "searchByServiceName">
<cfset option_string = '<option value="two">searchByServiceName</option>' />
<cfelse>
<cfset option_string = '<option value="two">searchByServiceAgent</option>' />
</cfif>
<cfreturn option_string />
</cffunction>
</cfcomponent>