Skip to main content
J
jasonb29017614
Participant
January 18, 2018
Answered

Show/hide multiple dropdown fields

  • January 18, 2018
  • 1 reply
  • 700 views

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

This topic has been closed for replies.
Correct answer try67

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.

1 reply

try67
Community Expert
try67Community ExpertCorrect answer
Community Expert
January 18, 2018

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.

    J
    jasonb29017614Author
    Participant
    January 19, 2018

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

    Regards

    Jason

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices