Dynamically change items in a dropdown list

const [children, setChildren] = useState<string[]>([]);
const parents = ["All", "Big", "Small"];
const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
const childrenBig = ["Elephant", "Truck", "Bus"];
const childrenSmall = ["Key", "Pen", "Watch"];

const loadItems = (value: string) => {
  if (value === "All") setChildren(childrenAll);
  else if (value === "Big") setChildren(childrenBig);
  else setChildren(childrenSmall);
};

const logSelection = () => {
  console.log("Item selected");
};

<GoabFormItem
  label="Size"
  requirement="optional"
  helpText="Choose the size to change the list below"
>
  <GoabDropdown
    name="parent"
    placeholder="Select a value"
    onChange={(event: GoabDropdownOnChangeDetail) =>
      loadItems(event.value as string)
    }
  >
    {parents.map((parent) => (
      <GoabDropdownItem key={parent} value={parent} label={parent} />
    ))}
  </GoabDropdown>
</GoabFormItem>

<GoabFormItem label="Items" requirement="optional" mt="xl">
  <GoabDropdown
    name="children"
    placeholder="Select a value"
    onChange={logSelection}
  >
    {children.map((child) => (
      <GoabDropdownItem key={child} value={child} label={child} mountType="reset" />
    ))}
  </GoabDropdown>
</GoabFormItem>

<div [formGroup]="changeForm" style="padding: 40px">
  <goab-form-item
    label="Size"
    requirement="optional"
    helpText="Choose the size to change the list below"
  >
    <goab-dropdown
      formControlName="parentDropdown"
      placeholder="Select a value"
      name="parent"
    >
      @for (parent of parents; track parent) {
      <goab-dropdown-item [value]="parent" [label]="parent" />
      }
    </goab-dropdown>
  </goab-form-item>

  <goab-form-item label="Items" requirement="optional" mt="xl">
    <goab-dropdown
      formControlName="childDropdown"
      placeholder="Select a value"
      name="children"
    >
      <ng-container *ngIf="children.length > 0">
        @for (child of children; track child) {
        <goab-dropdown-item [value]="child" [label]="child" [mountType]="'reset'" />
        }
      </ng-container>
    </goab-dropdown>
  </goab-form-item>
</div>

const parentDropdown = document.getElementById("parent-dropdown");
const childDropdown = document.getElementById("child-dropdown");

const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
const childrenBig = ["Elephant", "Truck", "Bus"];
const childrenSmall = ["Key", "Pen", "Watch"];

function updateChildren(items) {
  childDropdown.innerHTML = "";
  items.forEach((item) => {
    const dropdownItem = document.createElement("goa-dropdown-item");
    dropdownItem.setAttribute("value", item);
    dropdownItem.setAttribute("label", item);
    dropdownItem.setAttribute("mount", "reset");
    childDropdown.appendChild(dropdownItem);
  });
}

parentDropdown.addEventListener("_change", (e) => {
  const value = e.detail.value;
  if (value === "All") updateChildren(childrenAll);
  else if (value === "Big") updateChildren(childrenBig);
  else updateChildren(childrenSmall);
});

childDropdown.addEventListener("_change", () => {
  console.log("Item selected");
});

<div style="padding: 40px">
  <goa-form-item
    version="2"
    label="Size"
    requirement="optional"
    helptext="Choose the size to change the list below"
  >
    <goa-dropdown
      version="2"
      id="parent-dropdown"
      placeholder="Select a value"
      name="parent"
    >
      <goa-dropdown-item value="All" label="All"></goa-dropdown-item>
      <goa-dropdown-item value="Big" label="Big"></goa-dropdown-item>
      <goa-dropdown-item value="Small" label="Small"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>

  <goa-form-item version="2" label="Items" requirement="optional" mt="xl">
    <goa-dropdown
      version="2"
      id="child-dropdown"
      placeholder="Select a value"
      name="children"
    >
    </goa-dropdown>
  </goa-form-item>
</div>