如何用最符合Rails风格的方式实现Select2选择后更新Div内容？

你的问题根源在于：application.js是Rails资产管道中的预编译静态文件，运行在客户端浏览器中，根本无法调用服务器端的render方法，也不能解析ERB标签（<%= ... %>）。要实现选择选项后动态更新页面内容，最符合Rails风格的方式是通过AJAX请求服务器端渲染Partial，具体步骤如下：

1. 新增控制器Action处理渲染请求 #

首先在对应的控制器（比如JobsController）中添加一个Action，专门用来返回渲染好的Partial内容：

# app/controllers/jobs_controller.rb
def items
  # 处理找不到Job的情况，避免报错
  @job = Job.find_by(id: params[:job_id])
  if @job
    render partial: 'jobs/items', locals: { job: @job }
  else
    render plain: '', status: :not_found
  end
end

2. 配置路由 #

在config/routes.rb中添加对应路由，让AJAX请求能映射到上面的Action：

# 如果你已经有jobs资源路由，可以用member路由
resources :jobs do
  get :items, on: :member
end

# 或者直接定义简单路由（根据你的需求选择）
get 'jobs/:job_id/items', to: 'jobs#items', as: :job_items

3. 编写客户端AJAX逻辑 #

把原来的JS代码修改为通过AJAX请求服务器，获取渲染后的HTML并插入到目标div中。你可以把这段代码放在视图文件的<script>标签里，或者放在app/assets/javascripts下的文件中（注意不要用ERB，纯JS）：

$('.category-search').on('change', function() {
  const jobId = $(this).val();
  const targetDiv = $('#job-items');

  if (jobId) {
    // 对应你配置的路由，比如用member路由的话，URL是 `/jobs/${jobId}/items`
    $.ajax({
      url: `/jobs/${jobId}/items`,
      method: 'GET',
      success: function(html) {
        targetDiv.html(html);
      },
      error: function() {
        targetDiv.html('<p>无法加载职位详情</p>');
      }
    });
  } else {
    // 当用户清空选择时，清空目标div
    targetDiv.empty();
  }
});

备选方案：预渲染所有Partial（仅适用于选项较少的场景） #

如果你的Select2选项数量不多，也可以提前把所有Partial渲染在页面的隐藏元素中，然后选择选项时直接显示对应的内容：

<!-- 在视图中预渲染所有Partial -->
<% Job.all.each do |job| %>
  <div class="job-item-content" id="job-item-<%= job.id %>" style="display: none;">
    <%= render partial: 'jobs/items', locals: { job: job } %>
  </div>
<% end %>

然后JS代码改成：

$('.category-search').on('change', function() {
  const jobId = $(this).val();
  const targetDiv = $('#job-items');

  if (jobId) {
    const content = $(`#job-item-${jobId}`).html();
    targetDiv.html(content);
  } else {
    targetDiv.empty();
  }
});

不过这种方法不适合远程搜索（选项动态加载）的场景，因为你没法提前渲染还没加载出来的选项内容，所以优先推荐第一种AJAX方案。

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