Create a select list using AJAX

Question

Hello,
I saw Carl Backstrom and Scott Spendolini examples on how to use AJAX to populate a related item, based on a select list. What I'm looking for is the reversed angle.
I have a TextItem, and I want to generate a select list based on that TextItem, something like this:
select code, desc
from Table
where code like TextItem
Is it possible with AJAX? (in the current examples I gat lost in the on demand application process – How, if possible, to render the select list using the HTP package.)
Greatly appreciate the help
Arie.

Answer 1

Carl,
I hope you can help with this, from reading the forum, you seem to have a lot of experience with AJAX and Application Express. I have found your examples within the forums and can not get them to work on my servers. I am on version 2, and a 10g database. I am attempting to place 4 select lists on a page. Each one (with exception from the first) will be dependent on the previous. To make is simple I have started with only 2 select lists. The first select list (p1_select1) is a list of departments. The second list (p1_select2) should populate with the users who belong to the department selected from p1_select1. I can not seem to get the second select list to load. I have attempted to follow your code as best I could, I can see on the page that it has created the xml data, however it just does not populate the second select list. Here is a summary of what I have.
Thanks for lookin.
Mike
Page Regions:
HTML: main (10)
Region Header:
<script language="JavaScript1.1" type="text/javascript">
function f_Get_Data(pThis,pSelect_Source,pSelect_Target){
var l_Return = null;
var l_Select = html_GetElement(pSelect_Target);
var get = new htmldb_Get(null,html_GetElement('pFlowId').value,'APPLICATION_PROCESS=Get_Data',0);
get.add(pSelect_Source,pThis.value);
gReturn = get.get('XML');
if(gReturn && l_Select){
var l_Count = gReturn.getElementsByTagName("option").length;
l_Select.length = 0;
for(var i=0;i<l_Count;i++){
var l_Opt_Xml = gReturn.getElementsByTagName("option");
appendToSelect(l_Select, l_Opt_Xml.getAttribute('value'), l_Opt_Xml.firstChild.nodeValue)
get = null;
function appendToSelect(pSelect, pValue, pContent) {
var l_Opt = document.createElement("option");
l_Opt.value = pValue;
if(document.all){/* why is ie different ask bill */
pSelect.options.add(l_Opt);
l_Opt.innerText = pContent;
}else{
l_Opt.appendChild(document.createTextNode(pContent));
pSelect.appendChild(l_Opt);
</script>
Items
Region: main
10: P1_TEXT1 Select List
20: P1_TEXT2 Select List
P1_TEXT1 Form Element:
onChange="javascript:f_Get_Data(this,'P1_TEXT1','P2_TEXT2')";
APPLICATION PROCESS "On Demand" Get_Data:
declare
begin
owa_util.mime_header('text/xml', FALSE );
htp.p('Cache-Control: no-cache');
htp.p('Pragma: no-cache');
owa_util.http_header_close;
htp.prn('<select>');
for rec in (select ENAME , EMPNO
from EMP where DEPTNO = :P1_text1) loop
htp.prn('<option value="' || rec.EMPNO || '">' || rec.ENAME || '</option>');
end loop;
htp.prn('</select>');
exception
when no_data_Found then
null;
end;