Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Dropdown List choice to auto populate another dropdown in LiveCycle

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Level 7

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.

View solution in original post

1 Reply

Avatar

Correct answer by
Level 7

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.