ruby-on-rails - 将选择表单转换为下拉按钮

Question

更新:我快到了!在这个问题的末尾查看我的部分答案。

我有一个包含两个选择下拉列表的工作表单，第一个用于国家，第二个用于城市。当您选择一个国家时，ajax 请求会自动获取国家并更新国家框。

问题是选择下拉菜单很难看，我无法真正设计它们的样式。我想要的是一个下拉按钮，我可以在其上使用 Bootstrap 使其变得漂亮:Bootstrap Button

我不必更改 jquery 或 Controller 逻辑，我只需要更新我的 View 。但我什至不知道从哪里开始。这是我的:

<%= form_for :trip, url: {action: "index"}, html: {method: "get"} do |f| %>
  <%= f.select :country_obj_id, options_for_select(@countries.collect { |country|
    [country.name.titleize, country.id] }, @countries.first.name), {}, { id: 'countries_select' } %>
  <%= f.select :city_obj_id, options_for_select(@cities.collect { |city|
    [city.name.titleize, city.id] }, 0), {}, { id: 'cities_select' } %>
  <%= f.submit "Go!" %>
<% end %>

如何将选择项转换为下拉按钮？

---

更新:我现在可以得到回复。我只是不知道如何处理它来更新按钮。

该 View 有两个下拉按钮。第一个是国家，第二个是第一个国家的城市。我想更新所选国家/地区的城市列表:

<div class="dropdown" style="display:inline-block;">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select A Country
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
      <% @countries.each do |country| %>
        <%= content_tag(:li, link_to(country.name.titleize, update_cities_path(country_obj_id: country.id), remote: :true)) %>
      <% end %>
  </ul>
</div>
<div class="dropdown" style="display:inline-block;">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select A City
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
      <% @cities.each do |city| %>
        <%= content_tag(:li, city.name.titleize) %>
      <% end %>
  </ul>
</div>

选择一个国家进入 update_cities 函数，该函数获取传递的 country_obj_id 的城市。

def update_cities
  @cities = CityObj.where("country_obj_id = ?", 
                           params[:country_obj_id]).order(:name)
  respond_to do |format|
    format.js
  end
end

然后是我不明白的部分。 format.js 将我带到 update_cities.js.coffee，我没有更改我在选择下拉列表中使用的原始版本:

$("#cities_select").empty()
  .append("<%= escape_javascript(render(:partial => @cities)) %>")

这最终更新了我现在留在 View 中的旧选择下拉列表。但是我该如何修改 js 来更新我的新下拉按钮呢？

Answer 1

您需要混合使用 Javascript 和 Rails:

1. 首先，您需要以 Bootstrap 的按钮格式打印所有选项:

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Countries
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <% @countries.each do |country| %>
            <%= content_tag(:li, country.name.titleize) %>
        <% end %>
    </ul>
</div>

1. 添加功能以从此下拉列表中选择一个选项:

   https://stackoverflow.com/a/22000328/891807