Drop Down List

const cntlCascadingCountry = new ac.dropdowns.DropDownList(
	{
		dataStore: countries,
		fields: { text: "countryName", value: "countryId" },
		placeholder: "Country",
		popupHeight: "auto",
		change: () => {
			cntlCascadingCity.enabled = false;
			cntlCascadingCity.value = null;

			if (cntlCascadingCountry.value === null) {
				cntlCascadingState.enabled = false;
				cntlCascadingState.value = null;
			} else {
				let tempQuery = new ac.data.Query().where("countryId", "equal", cntlCascadingCountry.value);

				cntlCascadingState.enabled = true;
				cntlCascadingState.query = tempQuery;
				cntlCascadingState.value = null;
			}

			cntlCascadingState.dataBind();
			cntlCascadingCity.dataBind();
		}
	},
	"#cntlCascadingCountry"
);

const cntlCascadingState = new ac.dropdowns.DropDownList(
	{
		dataStore: states,
		fields: { text: "stateName", value: "stateId" },
		placeholder: "State",
		popupHeight: "auto",
		enabled: false,
		change: () => {
			if (cntlCascadingState.value === null) {
				cntlCascadingCity.enabled = false;
				cntlCascadingCity.value = null;
			} else {
				let tempQuery = new ac.data.Query().where("stateId", "equal", cntlCascadingState.value);

				cntlCascadingCity.enabled = true;
				cntlCascadingCity.query = tempQuery;
				cntlCascadingCity.value = null;
			}

			cntlCascadingCity.dataBind();
		}
	},
	"#cntlCascadingState"
);

const cntlCascadingCity = new ac.dropdowns.DropDownList(
	{
		dataStore: cities,
		fields: { text: "cityName", value: "cityId" },
		placeholder: "City",
		popupHeight: "auto",
		enabled: false
	},
	"#cntlCascadingCity"
);

<div class="d-flex align-items-center flex-wrap" style="gap: 10px; width: 60%">
	<input id="cntlCascadingCountry" />
	<input id="cntlCascadingState" />
	<input id="cntlCascadingCity" />
</div>

const countries = [
	{ countryName: "United Kingdom", countryId: "2" },
	{ countryName: "United States", countryId: "1" }
];

const states = [
	{ stateName: "Florida", countryId: "1", stateId: "100" },
	{ stateName: "North Carolina", countryId: "1", stateId: "101" },
	{ stateName: "New York", countryId: "1", stateId: "102" },
	{ stateName: "Texas", countryId: "1", stateId: "103" },
	{ stateName: "England", countryId: "2", stateId: "200" },
	{ stateName: "Northern Ireland", countryId: "2", stateId: "201" },
	{ stateName: "Scotland", countryId: "2", stateId: "202" },
	{ stateName: "Wales", countryId: "2", stateId: "203" }
];

const cities = [
	{ cityName: "Miami", stateId: "100", cityId: 1001 },
	{ cityName: "Orlando", stateId: "100", cityId: 1002 },
	{ cityName: "Tampa", stateId: "100", cityId: 1003 },
	{ cityName: "Asheville ", stateId: "101", cityId: 1004 },
	{ cityName: "Concord", stateId: "101", cityId: 1005 },
	{ cityName: "Raleigh", stateId: "101", cityId: 1006 },
	{ cityName: "Albany", stateId: "102", cityId: 1007 },
	{ cityName: "Buffalo", stateId: "102", cityId: 1008 },
	{ cityName: "Syracuse", stateId: "102", cityId: 1009 },
	{ cityName: "Austin", stateId: "103", cityId: 1010 },
	{ cityName: "Dallas", stateId: "103", cityId: 1011 },
	{ cityName: "Houston", stateId: "103", cityId: 1012 },
	{ cityName: "Birmingham", stateId: "200", cityId: 2001 },
	{ cityName: "London", stateId: "200", cityId: 2002 },
	{ cityName: "York", stateId: "200", cityId: 2003 },
	{ cityName: "Armagh", stateId: "201", cityId: 2004 },
	{ cityName: "Belfast", stateId: "201", cityId: 2005 },
	{ cityName: "Derry", stateId: "201", cityId: 2006 },
	{ cityName: "Aberdeen", stateId: "202", cityId: 2007 },
	{ cityName: "Edinburgh", stateId: "202", cityId: 2008 },
	{ cityName: "St Andrews", stateId: "202", cityId: 2009 },
	{ cityName: "Cardiff", stateId: "203", cityId: 2010 },
	{ cityName: "Monmouth", stateId: "203", cityId: 2011 },
	{ cityName: "Newport", stateId: "203", cityId: 2012 }
];