Динамика AlpineJS - Готовые решения на AlpineJS - Связные списки

Исходный код Выпадающего списка с подкатегориями https://codepen.io/cfjedimaster/pen/VwXrKOR

Пояснения по исходному коду:

В данном примере javascript код вынесен в отдельный скрипт.

AlpineJS запускается по событию 'alpine:init'. Далее, с помощью Alpine.data объявляются значения переменных. Функция getStates возвращает список штатов. По событию выбора элемента из списка, вызывается функция getCities, которая по id штата возвращает список городов.

 document.addEventListener('alpine:init', () => {
  Alpine.data('app', () => ({
		states:getStates(),
		state:null,
		city:null,
		cities() {
			return getCities(this.state);
		}
  }))
});

const getStates = () => {
	return [
		{id:1, label:"Alabama"},
		{id:2, label:"California"},
		{id:3, label:"Louisiana"},
		{id:4, label:"Texas"},
		{id:5, label:"Washington"}
		]
}

/*
generates fake cities, later states have more values
*/
const getCities = (id) => {
	if(!id) return [];
	let state = (getStates()).find(i => i.id === parseInt(id,10));
	let result = [];
	for(let i=0; i<(id*2); i++) {
		result.push({id:i, label:`${state.label} City ${i+1}`});
	}
	return result;
}