将选择表单转换为下拉按钮

Question

更新：我快到了！请参阅此问题末尾的部分答案。

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

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

我不必更改 jquery 或控制器逻辑，我只需更新我的视图。但我什至不知道从哪里开始。这就是我所拥有的：

<%= 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 %>

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

---

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

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

<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)) %>")

这最终更新了我现在留在视图中的旧选择下拉列表。但是如何修改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

Answer 2

知道了。这是有史以来最酷的事情。它从两个按钮开始。第一个说“选择一个国家”，第二个说“选择一个城市”。第二个按钮一开始是不活动的，我可能会隐藏它。

观点：

<div class="dropdown" style="display:inline-block;">
  <button id="country-select-btn" 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 id="cities_select" class="dropdown-menu">
  </ul>
</div>

下拉项只是链接，设置了路线，因此单击链接会转到控制器 update_cities 操作并传递国家/地区：

def update_cities
  @cities = CityObj.where("country_obj_id = ?", 
                           params[:country_obj_id]).order(:name)
  @country = CountryObj.find_by(id: params[:country_obj_id])

  respond_to do |format|
    format.js
  end
end

format.js 进入 update_cities.js

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

$("#country-select-btn").empty()
  .append("<%= escape_javascript(render(:partial => @country )) %>")

这会呈现两个部分。 _city_obj.html.erb 为每个城市渲染一个链接，点击后会跳转到控制器的 index 动作：

<li><%= link_to(city_obj.name.titleize, index_path(:trip => {country_obj_id: city_obj.country_obj.id, city_obj_id: city_obj.id}), id: "cities_select") %></li>

_country_obj.html 部分只是将按钮上的“Select A Country”标签更新为所选国家/地区的名称：

<%= country_obj.name.titleize %>

现在，当您单击其中一个城市链接时，控制器索引操作可以找到该城市/国家的所有指南，然后视图将呈现它。

Answer 3

据我了解，您想使用引导程序为您的 html 表单添加样式。如果是这种情况，那么您可以这样做：

1.添加引导 gem，如果您还没有按照文档完成它（https://github.com/twbs/bootstrap-sass） 简而言之，您需要在 Gemfile 中添加以下内容：

gem 'bootstrap-sass', '~> 3.3.5'

在您的 app/assets/stylesheets/application.scss 添加以下行，以便在每个页面上添加引导样式：

@import "bootstrap-sprockets";
@import "bootstrap";

2.使用引导样式，在你丑陋的选择标签处，你需要在你的类名中添加form-control，正如引导文档所建议的那样。像这样添加class: "form-control"参数：

<%= 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', class: "form-control" } %>
  <%= f.select :city_obj_id, options_for_select(@cities.collect { |city|
    [city.name.titleize, city.id] }, 0), {}, { id: 'cities_select', class: "form-control" } %>
  <%= f.submit "Go!" %>
<% end %>