openfoodnetwork/app/webpacker/controllers/dependant_select_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["source", "select"];
  static values = { options: Array };

  handleSelectChange() {
    this.populateSelect(parseInt(this.sourceTarget.value));
  }

  // private

  populateSelect(sourceId) {
    this.removeCurrentOptions()
    this.populateNewOptions(sourceId)
  }

  removeCurrentOptions() {
    this.selectTarget.innerHTML = ""

    this.selectTarget.tomselect?.clear()
    this.selectTarget.tomselect?.clearOptions()
  }

  populateNewOptions(sourceId) {
    const options = this.dependantOptionsFor(sourceId)

    options.forEach((item) => {
      this.addOption(item[0], item[1])
    });

    this.selectTarget.tomselect?.sync()
    this.selectTarget.tomselect?.addItem(options[0]?.[1])
  }

  addOption(label, value) {
    const newOption = document.createElement("option")
    newOption.innerHTML = label
    newOption.value = value
    this.selectTarget.appendChild(newOption)
  }

  dependantOptionsFor(sourceId) {
    return this.optionsValue.find((option) => option[0] === sourceId)[1]
  }
}