Populate dropdown

Question

I have a form that has 4 dropdownsI would like the form to populate DowpDown #4 based on the selections in Dropdowns1, 2 and 3Currently:1st dropdown the user would select Mom2nd dropdown the user would select Dad3rd dropdown the user would select 1 childthe 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.

Anudeep_Garnepudi · Accepted Answer

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

VeenaVikraman · Answer

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded