Rails 7中使用Turbo Stream为下拉框添加默认值的问题

当前使用Ruby 3.1.2 + Rails 7.0.3.1开发动态下拉框时，通过Turbo Stream更新state和city选项后，无法显示"Select"类的默认提示选项，以下是针对性修复方案：

1. 修复State下拉框的默认值逻辑 #

调整控制器数据处理 #

修改app/controllers/dropdown_controller.rb的state方法，移除把"Select"混入选项数组的逻辑，让视图统一处理默认提示：

def state
  if params[:country].blank?
    @states = []
  else
    @states = CS.states(params[:country]).invert
  end
  respond_to do |format|
    format.turbo_stream
  end
end

修正Turbo Stream视图 #

更新app/views/dropdown/state.turbo_stream.erb，通过prompt参数明确添加默认提示：

<%= turbo_stream.update "state" do %>
  <%= options_for_select(@states, prompt: "Select") %>
<% end %>

2. 修复City下拉框的默认值 #

修改app/views/dropdown/city.turbo_stream.erb，添加默认提示并处理空数据场景：

<%= turbo_stream.update "city" do %>
  <%= options_for_select(@cities.presence || [], prompt: "Select") %>
<% end %>

@cities.presence || []确保在无城市数据时不会报错，同时始终显示默认提示。

3. 优化：切换国家时重置City下拉框 #

为避免旧数据残留，修改app/javascript/controllers/selectdropdown_controller.js的countryRequest方法，在更新state后清空city下拉框：

countryRequest(event){
  let params = new URLSearchParams()
  params.append("country",event.target.value)
  get(`${this.urlValue}?${params}`,{
    responseKind: "turbo-stream"
  }).then(() => {
    const citySelect = document.getElementById('city');
    citySelect.innerHTML = '<option value="">Select</option>';
  })
}

验证要点 #

确保表单中state和city的select元素ID与Turbo Stream更新的目标ID一致（当前代码中form.select :state生成的ID为state，form.select :city生成的ID为city，匹配Turbo Stream的更新目标）。

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