Populate dropdown | Community
Skip to main content
Yvette_s_Channe
Yvette_s_Channe
New Participant
March 8, 2021
Solved

Populate dropdown

  • March 8, 2021
  • 3 replies
  • 1759 views

I have a form that has 4 dropdowns

I would like the form to populate DowpDown #4 based on the selections in Dropdowns1, 2 and 3

Currently:

1st dropdown the user would select Mom

2nd dropdown the user would select Dad

3rd dropdown the user would select 1 child

the 4th dropdown would only display from this list: Nanny and Babysitter. All other options would not be available for the user to select.

 

Thank you in advance for your help.

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anudeep_Garnepudi

@yvette_s_channe 

Try the below code snippet.

let ddOneValue = $(".cq-dialog").find("#dropdown-one")[0].selectedItem.value; let ddTwoValue = $(".cq-dialog").find("#dropdown-two")[0].selectedItem.value; let ddThreeValue = $(".cq-dialog").find("#dropdown-three")[0].selectedItem.value; let ddFourField = $(".cq-dialog").find("#dropdown-four")[0]; let optionsJson = []; if (ddOneValue == "Mom" && ddTwoValue == "Dad" && ddThreeValue == "1-child") { let obj1 = { "text":"Nanny", "value":"nanny" }; let obj2 = { "text":"Babbysitter", "value":"babbysitter" }; optionsJson.push(obj1); optionsJson.push(obj2); } let optionItems = ddFourField.items; optionItems.clear(); for (var i = 0; i < optionsJson.length; i++) { let obj = new Object(); let cnt = new Object(); obj["value"] = optionsJson[i].value; cnt["textContent"] = optionsJson[i].text; obj["content"] = cnt; optionItems.add(obj); }

All #dropdown-xxx are granite:id to coral select fields. 

Depending upon your use case, create optionsJson dynamically in best possible way.  

3 replies

Yvette_s_Channe
Yvette_s_ChanneAuthor
New Participant
March 24, 2021

Thank you, I actually changed the form to tables. Now when the user clicks "Add" it will add another subform. They enter information into this subform, but it duplicates rows. Is there a script that I can use to put into the subforms to look for duplicates and delete the duplicated row?

VeenaVikraman
VeenaVikraman
New Participant
March 9, 2021

@yvette_s_channe Is the form on a page or you are talking about tabs and dropdown in Dialog ? 

    Yvette_s_Channe
    Yvette_s_ChanneAuthor
    New Participant
    April 5, 2021
    Thank you for responding, my form has dropdown lists. I would like the user to be able to select from the Canopy dropdown list, but if they change their mind and select something else the entire form resets. Currently this is what I have "xfa.host.resetData();" and it only resets the current subform, not the entire form. Thank you in advance.
    Anudeep_Garnepudi
    Anudeep_GarnepudiAccepted solution
    New Participant
    March 8, 2021

    @yvette_s_channe 

    Try the below code snippet.

    let ddOneValue = $(".cq-dialog").find("#dropdown-one")[0].selectedItem.value; let ddTwoValue = $(".cq-dialog").find("#dropdown-two")[0].selectedItem.value; let ddThreeValue = $(".cq-dialog").find("#dropdown-three")[0].selectedItem.value; let ddFourField = $(".cq-dialog").find("#dropdown-four")[0]; let optionsJson = []; if (ddOneValue == "Mom" && ddTwoValue == "Dad" && ddThreeValue == "1-child") { let obj1 = { "text":"Nanny", "value":"nanny" }; let obj2 = { "text":"Babbysitter", "value":"babbysitter" }; optionsJson.push(obj1); optionsJson.push(obj2); } let optionItems = ddFourField.items; optionItems.clear(); for (var i = 0; i < optionsJson.length; i++) { let obj = new Object(); let cnt = new Object(); obj["value"] = optionsJson[i].value; cnt["textContent"] = optionsJson[i].text; obj["content"] = cnt; optionItems.add(obj); }

    All #dropdown-xxx are granite:id to coral select fields. 

    Depending upon your use case, create optionsJson dynamically in best possible way.  

      Terms & ConditionsAccessibility statement

      Loading footer...