I am developing a web front end for a client and they require a search screen that has drop down lists. These drop down list choices are dependent, i.e. the choices of the second list are dependent on what the user chooses from the first list.
Can't find info on how to do this, do you have any idea where I may be able to find any examples or decent documentation.
I've put a quick demo up. It work on EMP and DEPT. I have a list of deptno's, as you change their value - the list of enames in that DEPT updates itself. To test it see:
</code>
http://asktom.oracle.com/pls/ask/ask_tom.test_onchange.main <code>
What we've done is to use frames. One hidden frame actually rewrites itself every time we change the DEPTNO. We send the new deptno up to the server and get the list of enames for that DEPTNO. This hidden frame then truncates the old list and fills it with the new values. The code for doing this is as follows (sample for the emp and dept tables, you would recode for your environment of course)
set define off
create or replace
package test_onchange as
procedure main;
procedure frame_main;
procedure frame_hidden(p_deptno varchar2 default null);
end test_onchange;
/
create or replace
package body test_onchange as
g_addToList constant varchar2(512) default '
<script language="javascript">
function addToList( n, v )
{
with ( document.forms[0].p_ename )
options[length] = new Option( n, v );
}
</script>';
g_lookUp constant varchar2(512) default '
<script language="javascript">
function lookUp( deptNo )
{
document.forms[0].p_deptno.value = deptNo;
document.forms[0].submit();
}
</script>';
procedure main is
begin
htp.framesetOpen( crows=> '100%,0' );
htp.frame( cname => 'mainFrame',
csrc => 'test_onchange.frame_main' );
htp.frame( cname => 'hiddenFrame',
csrc => 'test_onchange.frame_hidden',
cattributes => ' MARGINWIDTH=0 ' ||
' MARGINHEIGHT=0 ' ||
' NORESIZE' );
htp.framesetClose;
end main;
procedure frame_main
is
begin
htp.p( g_addToList );
htp.formOpen( null );
htp.p( 'Deptno:' );
htp.formSelectOpen( 'p_deptno',
cattributes => 'onChange="parent.hiddenFrame.'||
'lookUp( this.options[' ||
'this.selectedIndex].value );"' );
for c in ( select deptno, decode(deptno,10,'Y',null) sel
from dept )
loop
htp.formSelectOption( c.deptno, c.sel,
cattributes => 'value="' || c.deptno || '"' );
end loop;
htp.formSelectClose;
htp.br;
htp.p( 'Ename:' );
htp.formSelectOpen( 'p_ename' );
for c in ( select ename from emp where deptno = 10 )
loop
htp.formSelectOption( c.ename );
end loop;
htp.formSelectClose;
htp.br;
htp.formClose;
end frame_main;
procedure frame_hidden( p_deptno varchar2 default null )
is
l_not_found boolean := true;
begin
htp.p( g_lookUp );
htp.formOpen( 'test_onchange.frame_hidden' );
htp.formHidden( 'p_deptno', null );
htp.formClose;
htp.p( '<script language="javascript">' );
htp.p( 'with( parent.mainFrame )' );
htp.p( '{' );
if p_deptno is not null
then
htp.p( ' document.forms[0].p_ename.length = 0;' );
for c in ( select ename
from emp
where deptno = p_deptno
order by ename )
loop
htp.p( ' addToList( "' || c.ename ||
'", "' || c.ename || '" );' );
l_not_found := false;
end loop;
end if;
if l_not_found
then
htp.p( ' addToList( "NULL", "" );' );
end if;
htp.p( ' document.forms[0].p_ename.' ||
'selectedIndex = 0;' );
htp.p( ' document.forms[0].p_ename.focus();' );
htp.p( '}' );
htp.p( '</script>' );
end frame_hidden;
end test_onchange;
/
set define on