Skip to main content
J
josephs67481092
Participant
May 21, 2021
Answered

Dependant Drop Down List

  • May 21, 2021
  • 1 reply
  • 2781 views

Hi All!

I am trying to create a form where the options available in dropdown box 2 will change depending on the option selected in the first drop down box.

 

Dropdown box 1 is Cost Type: (Options being Overhead Cost or Property Cost)

 

If Overhead cost is selected id like dropdown box 2 to only show certain options, and similarly if Property Cost is selected id like a different set of options to be available.

 

Am i able to do this? if so how! which dropdown has the javascript and what is the coding i need!?

    This topic has been closed for replies.
    Correct answer Nesa Nurani

    You need to use 'setItems()' to populate second dropdown field.

    This is basic script how to do it, you adapt script to your needs, it's used as 'Validation' of first dropdown field:

    if(event.value == "A")
    this.getField("Dropdown2").setItems(["A1","A2","A3"]);
    else if(event.value == "B")
    this.getField("Dropdown2").setItems(["B1","B2","B3"]);
    else this.getField("Dropdown2").clearItems();

    1 reply

    Nesa Nurani
    Community Expert
    Nesa NuraniCommunity ExpertCorrect answer
    Community Expert
    May 21, 2021

    You need to use 'setItems()' to populate second dropdown field.

    This is basic script how to do it, you adapt script to your needs, it's used as 'Validation' of first dropdown field:

    if(event.value == "A")
    this.getField("Dropdown2").setItems(["A1","A2","A3"]);
    else if(event.value == "B")
    this.getField("Dropdown2").setItems(["B1","B2","B3"]);
    else this.getField("Dropdown2").clearItems();

      J
      josephs67481092Author
      Participant
      May 21, 2021

      Great!
      if i need it to apply to further dropdown from the same first selection how do i extend the script to cover dropwdown 3 and dropwdown 4?

      Nesa Nurani
      Community Expert
      Nesa NuraniCommunity Expert
      Community Expert
      May 21, 2021

      Just put it inside curly brackets like this.

      if(event.value == "A"){
      this.getField("Dropdown2").setItems(["A1","A2","A3"]);

      this.getField("Dropdown3").setItems(["B1","B2","B3"]);

      this.getField("Dropdown4").setItems(["C1","C2","C3"]);}

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