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.
Solved! Go to Solution.
Views
Replies
Total Likes
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.
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.