AlchemyCMS/alchemy_cms

<div class="input">
  <% if Alchemy::Language.published.many? %>
    <label class="inline-label" style="float: right">
      <%= Alchemy::Language.model_name.human %>
      <%= select_tag :language_id, options_from_collection_for_select(
          Alchemy::Language.published, :id, ->(l) { l.code.upcase },
          selected: @picture_description.language_id,
        ), data: {
          url: alchemy.edit_admin_picture_description_url(id: "__ID__", picture_id: @picture)
        } %>
    </label>
  <% end %>

  <turbo-frame id="picture_descriptions">
    <%= render "alchemy/admin/picture_descriptions/form",
      picture_description_counter: @picture.descriptions.index(@picture_description),
      picture_description: @picture_description %>
  </turbo-frame>
</div>

<script type="module">
  const select = document.querySelector("#language_id")

  select.addEventListener("change", () => {
    const url = new URL(select.dataset.url)
    url.searchParams.set("language_id", select.value)
    Turbo.visit(url, { frame: "picture_descriptions" })
  })
</script>