Populate dropdown

Avatar

Avatar

Yvette_s_Channe

Avatar

Yvette_s_Channe

Yvette_s_Channe

08-03-2021

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.

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Anudeep_Garnepudi

MVP

Avatar

Anudeep_Garnepudi

MVP

Anudeep_Garnepudi
MVP

08-03-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.  

Answers (2)

Answers (2)

Avatar

Avatar

Veena_Vikram

MVP

Avatar

Veena_Vikram

MVP

Veena_Vikram
MVP

08-03-2021

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

Avatar

Avatar

Yvette_s_Channe

Avatar

Yvette_s_Channe

Yvette_s_Channe

24-03-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?