Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Populate dropdown

Yvette_s_Channe
Level 2
Level 2

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.

 

 

1 Accepted Solution
Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor

@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.  

View solution in original post

4 Replies
Anudeep_Garnepudi
Correct answer by
Community Advisor
Community Advisor

@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.  

View solution in original post

Veena_Vikram
Community Advisor
Community Advisor

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

Yvette_s_Channe
Level 2
Level 2
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.
Yvette_s_Channe
Level 2
Level 2

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?