如何改进动态局部加载逻辑并保留下拉选择值

当前下拉选择框使用URL作为<option>的value属性，导致表单提交时系统试图将URL写入整数类型的occurrence字段，引发数据类型不匹配问题。以下是重构方案，让选项值为实际的occurrence整数值，同时保留动态加载局部视图的功能：

1. 修改ERB模板中的下拉选择框和Turbo Frame #

调整<option>的value为occurrence的实际整数值，并通过自定义数据属性存储加载局部视图的URL，同时修复name属性的语法错误：

<select name="scheduleevent[occurrence]" id="occurrence" data-controller="remote-select" 
        data-action="change->remote-select#update"  
        class="mb-4 w-48 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
  <% Scheduleevent.occurrences.each do |occurrence| %>
    <option value="<%= occurrence.second %>" data-path="<%= new_scheduleevent_path(range: occurrence.second) %>">
      <%= occurrence.first %>
    </option>
  <% end %>
</select>

<%= turbo_frame_tag :ranges do %>
  <%= render partial: params[:range] || "0", locals: {form: form} %>
<% end %>

2. 调整Stimulus控制器逻辑 #

修改update方法，从选中选项的自定义数据属性中获取URL，而非直接使用选项的value：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  update() {
    const selectElement = event.target;
    const selectedOption = selectElement.querySelector('option:checked');
    const frame = document.getElementById('ranges');
    
    if (selectedOption && frame) {
      frame.src = selectedOption.dataset.path;
    }
  }
}

核心修改说明 #

• 选项value改为实际的occurrence整数值，表单提交时会正确传递该值到后端，匹配数据库的整数类型字段
• 用data-path属性存储加载局部视图的URL，Stimulus通过该属性获取路径并更新Turbo Frame的src
• 修复了原select标签name属性的语法错误（缺失闭合的]）

内容的提问来源于stack exchange，提问作者spacerobot