This article describes an simple but powerful way to implement cascading selectlists in tabular forms.

At first, let me show you what is meant by cascading selectlists. A cascading selectlist changes its available options after an item, e.g. another selectlist gets changes.

Lets have a look at the selectlist of the second column "Emp No" of the last row from the example above. The available options change immediately after selecting a value from the selectlist of the first column "Dept No". In this example, you can choose between BLAKE, CLARK and JONES, if you have previously selected RESEARCH. If you have selected OPERATIONS, then you have the options ALLEN, WARD, MARTIN and TURNER at your disposal.

The method implemented here is kept very simple. The query for the first selectlist in column "Dept No" looks like:

select DNAME d, DEPTNO r from DEPT

The idea for the cascading selectlist-query of column "Emp No" is to have all options available at the beginning. All options means, any combination between the Department and Employee that should be available at some point.

select d.DEPTNO||': '||e.ENAME d, e.EMPNO r from EMP e
join DEPT d on (d.DEPTNO = 10 and e.JOB = 'PRESIDENT')
            or (d.DEPTNO = 20 and e.JOB = 'MANAGER')
            or (d.DEPTNO = 30 and e.JOB = 'ANALYST')
            or (d.DEPTNO = 40 and e.JOB = 'SALESMAN')

For Department 10, only Employees with Job 'PRESIDENT' are options, for Department 20 all Employees that are "MANAGER", etc.

The last thing we need is a dynamic action, that is triggered when the value of the first selectlist gets changed.

It might be possible that you need to adjust your jQuery-selector "f??_" to use the correct column-number, or any other item or source. Keep in mind that this selector is the trigger for the source and not the cascaded list itself. Don't forget to set the Event Scope to dynamic!

The Javascript Code that needs to be executed with this dynamic action is:

// Get the value of the Source Element that will be used to determine which options will be shown in the casaded selectlist
var type = $(this.triggeringElement).val();

// Get all options of the cascaded selectlist and walk through them
$(this.triggeringElement).parent().parent().find('select[name="f03"] option').each( function() {
  // Show an option if the text of it begins with the Department ID followed by :, otherwise hide it
  if ($(this).text().indexOf(type+':') >= 0) {
    $(this).show();
  } else {
    $(this).hide();
  };
});

Now you have cascading selectlists in tabular forms.

There are many possiblities to improve this feature, like hiding the Department ID within an option attribute or pre-selecting a value.

You can try it out here.