使用 select2 gem 执行 ajax 的 Html 问题代码

Question

选择一个选项后，我使用ajax 调用来更新另一个select_tag，但生成的html 代码错误（在id 和值上）。

表格：

|departaments|
  |id|  |name|
   1     dep1
   2     dep2
|provinces|
  |id|  |name| |departament_id|
    1    pr1      1
    2    pr2      1

控制器：

def new
  @client= Client.new
end

def province_update
  @provinces = Province.where(departament_id: params[:departament_id])
end

查看new.html.erb

<script>
  $(document).ready(function() { 
    $(".search_select").select2();
  });
</script>
<script>
 $(function() {
   $('#departament_id').on('change', function() {
    $.get("province_update", {
      departament_id: $('#departament_id').val()
    }, function(e) {
       if (e)
       $("#province_id").select2().html(e);
   })
 });
});

</script>

Departament: <%= select_tag :departament_id,options_from_collection_for_select(@departaments, 'id', 'name') %>
Province: <%= select_tag :province_id) %>

Javascript province_update.rjs

$("#province_id").html('<%= j render partial: "provinces_result" %>')

部分_provinces_result.erb

<%= select_tag :province_id,options_from_collection_for_select(@provinces, 'id', 'name')

日志：

Started GET "/clients/province_update?departament_id=6" for 127.0.0.1 at 2016-06-22 17:03:55 -0500
  Processing by ClientsController#province_update as */*
  Parameters: {"departament_id"=>"6"}
   Province Load (0.1ms)  SELECT `provinces`.* FROM `provinces` WHERE `provinces`.`departament_id` = 6  ORDER BY name ASC
   Rendered _provinces_result.erb (2.3ms)
   Rendered client_management/clients/province_update.js.erb (9.1ms)
   Completed 200 OK in 14ms (Views: 12.5ms | ActiveRecord: 0.3ms)

输出：

<select name="province_id" id="province_id" class="select2-offscreen" title="" tabindex="-1">$("#province").html(' \n\nProvince&lt;\/label&gt; 
   <option value="\&quot;105\&quot;">pr1&lt;\/option&gt;\n</option>
   <option value="\&quot;108\&quot;">pr2&lt;\/option&gt;&lt;\/select&gt;\n')
   $("#district").html('\nDistrito&lt;\/label&gt; </option>
   <option value="\&quot;\&quot;">Select&lt;\/option&gt;&lt;\/select&gt;\n')</option>
</select>

我尝试了这段代码，但我仍然遇到 html 问题：

 $("#province_bill").append('<%= j render partial: "provinces_bill_result" %>')

如果我更改此代码，下拉菜单不会更新：

 $("#province_id").select2();

我在控制器上尝试了这段代码，但它没有更新下拉列表：

def province_update
  @provinces = Province.where(departament_id: params[:departament_id])
  respond_to do |format|
    format.json { render json: @provinces }
  end
end

Answer 1

我发现了一些潜在的问题：

1. 您的select_tag 的ID 似乎是#province_id 而不是#province（就像您在.rjs 文件中一样）。这意味着将部分渲染（如您在日志中看到的那样）到 .rjs 文件，但由于您的 html 中没有 #province 元素，因此不会使用该代码。
2. 如果新的select_tag 正确呈现为html，select2 不会自动知道要更新。您需要通过在第一行之后的 .rjs 中说 $("#province_id").select2(); 来告诉它。这可能会导致呈现两个表单，但我不确定。