Show/hide multiple dropdown fields

[jasonb29017614]

Hi everyone,

I’m trying to put some JavaScript together to show/hide multiple dropdown fields within a PDF when an option from the previous field is selected.

I've developed some code that works and below is a sample:

if (event.value == "Please Select") {
this.getField("ccCONchim").display = display.hidden;
this.getField("ccCONcobs").display = display.hidden;
this.getField("ccCONchc").display = display.hidden;
}
else if (event.value == "Consumer - Construction & Home Improvement Markets") {
this.getField("ccCONchim").display = display.visible;
this.getField("ccCONcobs").display = display.hidden;
this.getField("ccCONchc").display = display.hidden;
}
else if (event.value == "Consumer - Consumer & Office Business Sponsor") {
this.getField("ccCONchim").display = display.hidden;
this.getField("ccCONcobs").display = display.visible;
this.getField("ccCONchc").display = display.hidden;
}
else if (event.value == "Consumer - Consumer Health Care") {
this.getField("ccCONchim").display = display.hidden;
this.getField("ccCONcobs").display = display.hidden;
this.getField("ccCONchc").display = display.visible;

My issue is that I need to condense the code further because when I expand on the code it is too long for the JavaScript import feature (over 1500 lines). I'm looking to develop a solution similar to this below but something that works.

if (event.value == "Please Select") {
this.getField("ccCONchim", "ccCONcobs", "ccCONchc").display = display.hidden;
}
else if (event.value == "Consumer - Construction & Home Improvement Markets") {
this.getField("ccCONchim").display = display.visible;
this.getField("ccCONcobs", "ccCONchc").display = display.hidden;
}
else if (event.value == "Consumer - Consumer & Office Business Sponsor") {
this.getField("ccCONcobs").display = display.visible;
this.getField("ccCONchim", "ccCONchc").display = display.hidden;
}
else if (event.value == "Consumer - Consumer Health Care") {
this.getField("ccCONchc").display = display.visible;
this.getField("ccCONchim", "ccCONcobs").display = display.hidden;
}

Thank in advance for your help.

Regards

Jason

[try67 · Accepted solution]

I would do it with a literal object that defines which fields should be visible for each value. Something like this:

var data = {
    "Consumer - Construction & Home Improvement Markets" : ["ccCONchim"],
    "Consumer - Consumer & Office Business Sponsor" : ["ccCONcobs"],
    "Consumer - Consumer Health Care": ["ccCONchc"]
}
for (var i in data) {
    for (var j in data) {
        this.getField(data).display = (event.value==i) ? display.visible : display.hidden;
    }
}

This code basically replaces all of the code you currently have, and is easy to extend and maintain.

[jasonb29017614]

Thank you so much try67​, this has worked perfectly and it's a fraction of the code I was generating.

Regards

Jason