Cascading LOV's in a multi row report

Question

Some while ago there was a great post about dependant LOV's, for ref. its this one:
http://forums.oracle.com/forums/thread.jspa?messageID=1222153?
I've been trying to do something very similar, but i'd like the code to work with display and return values, where the return val. is an ID, rather than in the old example it being the same as the displayed value, so looking at the original example, instead of:
select val d, val r from manufacturer order by 1
If we modified the table definition to this:
CREATE TABLE MANUFACTURER
ID NUMBER,
VAL VARCHAR2(200 BYTE)
we would have something like
select val, id from manufacturer order by 1
Not being a javascript guru, can anyone advise if the code can be modified to cater for this? I have had partial success in that the second LOV updates based upon the value in the first LOV, but when changes are saved, it still stores the displayed value rather than the return ID.
For reference, i've modified the on demand process to this:
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 cpc_name, cpc_id from ct_product_categories cpp, ct_page cp
where cpp.cc_id = cp.cp_id
and cp.cp_id = :TEMPORARY_ITEM) loop
htp.prn('<option value="' || rec.cpc_name|| '">' || rec.cpc_name|| '</option>');
end loop;
htp.prn('</select>');
end;
I have 2 LOV's rather than the original examples 3, the first of which is defined as a simple query thus:
select cp_name nm, cp_id id from CT_page order by 1
This first query triggers the ondemand process defined above. The second query is simply:
select cpc_name nm2, cpc_id id2 from ct_product_categories
The javascript used in the region header is:
<script type="text/javascript">
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);
var g_subj_area=new Object;
//var g_sales_reps=new Object;
function replace_select_list(pSelect,pXML){
     var l_Count = pXML.getElementsByTagName("option").length;
     pSelect.length = 0;
     for(var j=0;j<l_Count;j++){
          var l_Opt_Xml = pXML.getElementsByTagName("option")[j];
          appendToSelect(pSelect, l_Opt_Xml.getAttribute('value'), l_Opt_Xml.firstChild.nodeValue)
function get_ajax_select_xml(pThis)
var l_Return = null;
var l_td=$x_UpTill(pThis,'TD');
var l_subj_area_2=l_td.nextSibling.getElementsByTagName('select')[0];
var old_subj_area_2;
if (l_subj_area_2.options.length>0) old_subj_area_2=html_SelectValue(l_subj_area_2);
if (g_subj_area[pThis.value] && l_subj_area_2) {
replace_select_list(l_subj_area_2,g_subj_area[pThis.value]);
if (old_subj_area_2) html_SetSelectValue(l_subj_area_2,old_subj_area_2);
else {
var get = new htmldb_Get(null,html_GetElement('pFlowId').value,'APPLICATION_PROCESS=GET_SUBJ_AREA',html_GetElement('pFlowStepId').value);
get.add('TEMPORARY_ITEM',pThis.value);
gReturn = get.get('XML');
if(gReturn && l_subj_area_2) { replace_select_list(l_subj_area_2,gReturn); if (old_subj_area_2) html_SetSelectValue(l_subj_area_2,old_subj_area_2);}
g_subj_area[pThis.value]=gReturn;
get=null;
</script>
And the javascript used in the region footer is:
<script type="text/javascript">
function getCellIndex(pRow,pCell){
     if (document.all){
          for(var i=0;i<pRow.cells.length;i++){
               if(pRow.cells[i] == pCell){l_Count = i}
     }else{
          l_Count = pCell.cellIndex;
return l_Count;
function fire_onchange(){
     var td_subj_area_1=$x('SUBJECT_AREA_1');
     var l_cellindex=getCellIndex(td_subj_area_1.parentNode,td_subj_area_1);
     var l_table=$x_UpTill(td_subj_area_1,'TABLE');
     for (var j=1;j<l_table.rows.length-2;j++) {   
          var l_cell=l_table.rows[j].cells[l_cellindex];
          var l_select=l_cell.getElementsByTagName('select')[0];
          if (l_select && l_select.onchange) l_select.onchange();
fire_onchange();
</script>

Answer 1

User478832,
I didn't look thru all the code but I have a feeling your problem is the 9th line in the On Demand process. (the 9th line in this post anyway)...
htp.prn('<option value="' || rec.cpc_name|| '">' || rec.cpc_name|| '</option>');
You modified your query to get a different column but your returning the same column later: rec.cpc_name x2
I assume you want to display NAME and return ID so change it like this...
htp.prn('<option value="' || rec.cpc_id || '">' || rec.cpc_name|| '</option>');
Let me know if that helps...
Dan