Dropdown List choice to auto populate another dropdown in LiveCycle

[EJobling]

I have a dropdown list with around 70 different Course Titles. Depending on which course is selected I then need it to auto populate list/s in another dropdown field. For example:

1st Dropdown = Course Selected is: 11T/0001

2nd Dropdown = Authority Code choice would be: AAA, BBB, CCC

or if 

1st Dropdown = Course Selected is: 11T/0002

2nd Dropdown = Authority Code choice would be: AAA, DDD,FFF

or if

1st Dropdown = Course Selected is: 11T/0003

2nd Dropdown = Authority Code choice would be: CCC, DDD,GGG,HHH

I have tried to come up with a solution using a few forums but my knowledge is limited. So far in dropdown one I already have this code on enter:

(this.rawValue == null)
{
var arrayItems = eval(List1.value);
for (var i=0; i < arrayItems.length; i++)
{
this.addItem(arrayItems[i]);
}
}

Then in dropdown 2 I have this code on enter:

if ((CourseApplicationForm.Section4.CourseTitle.rawValue == "11T/0001" && this.rawValue == null) ||
(CourseApplicationForm.Section4.CourseTitle.rawValue == "11T/0002)" && this.rawValue == null))
{
var arrayItems = eval(List2_Choice_01.value);
for (var i=0; i < arrayItems.length; i++)
{
this.addItem(arrayItems[i]);
this.setItemState(0,1);
}
}

if ((CourseApplicationForm.Section4.CourseTitle.rawValue == "11T/0003" && this.rawValue == null) ||
(CourseApplicationForm.Section4.CourseTitle.rawValue == "11T/0004" && this.rawValue == null) ||
(CourseApplicationForm.Section4.CourseTitle.rawValue == "11T/0005" && this.rawValue == null))
{
var arrayItems = eval(List2_Choice_02.value);
for (var i=0; i < arrayItems.length; i++)
{
this.addItem(arrayItems[i]);
this.setItemState(0,1);
}
}

if (CourseApplicationForm.Section4.CourseTitle.rawValue == "11T/0006" && this.rawValue == null)
{
var arrayItems = eval(List2_Choice_03.value);
for (var i=0; i < arrayItems.length; i++)
{
this.addItem(arrayItems[i]);
this.setItemState(0,1);
}
}

I have also created the variables in Form Properties. Any help would be appreciated - or if there is a better way!

Many Thanks.

[Anmol_Bhardwaj · Accepted solution]

Hi @EJobling ,

This can be achieved through Java as well. But, I think the easier way is to do this through JS/CSS. 

For the HTML construction, just make sure that you have a data attribute for the drop-down values which we can use and map. (It can be multiple as well, just keep them comma separated)

Keep all the values in the drop-down(HTML). Keep all the values apart from the first dropdown one as (CSS)

.hide{display:none}

Now, put a listener ( on-change) on the first drop-down :

object.onchange = () =>{myScript};

Now, based on the value selected in the drop-down, just remove the hide class to the second level options which have matching data attributes. 

Call the same function and put the same listener on all the drop-downs. And you should be able to see what you're looking for.