Stimulus and select example

select_box_controller.js

// stimulus controller
export default class extends Controller {
  static targets = ["roleDescription", "roleDescriptionNone", "selectBox"]

  connect() {
    // actualizar role list si select tiene algo definido
    this.updateRolesList()
  }
  
  updateRolesList() {
    this.roleDescriptionNone.target.classList.add("hidden")

    // ocultar todos los roles
    this.roleDescriptionTargets.forEach((role) => {
      role.classList.add("hidden")
    })

    // mostrar el role seleccionado
    const selectedRole = this.selectBoxTarget.value
    this.roleDescriptionTargets.find((role) => {
      if (role.id === selectedRole) {
        role.classList.remove("hidden")
      } else {
        // mostrar box info si no hay role seleccionado
        this.roleDescriptionNone.target.classList.remove("hidden")
      }
    })
}



// view donde esta por ejemplo el select box
<div data-controller="select_roles_info_controller">
  <select 
    id="select_box" 
    name="select_box" 
    data-select-roles-info-controller-target="select_box" 
    data-action="change->select_roles_info#update_roles_list">
    <option value="">Select a role</option>
    <option value="role1">Role 1</option>
    <option value="role2">Role 2</option>
    <option value="role3">Role 3</option>
  </select>

  <div class="" id="roles_list">
    <div class="hidden" id="role0" data-select-roles-info-controller-target="role_description_none">Algo informativo</div>


    <div class="hidden" id="role1" data-select-roles-info-controller-target="role_description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum doloremque ratione culpa quos ducimus molestias laudantium quasi velit voluptatum, et, unde laborum ullam accusamus animi debitis labore suscipit doloribus atque></div>


    <div class="hidden" id="role2" data-select-roles-info-controller-target="role_description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum doloremque ratione culpa quos ducimus molestias laudantium quasi velit voluptatum, et, unde laborum ullam accusamus animi debitis labore suscipit doloribus atque></div>

    <div class="hidden" id="role3" data-select-roles-info-controller-target="role_description">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum doloremque ratione culpa quos ducimus molestias laudantium quasi velit voluptatum, et, unde laborum ullam accusamus animi debitis labore suscipit doloribus atque></div>
  </div>
</div>