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：

首先，您需要以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>

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

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呈现每个城市的链接，点击后将转到控制器的索引操作：

<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 partial只是将按钮上的“选择国家/地区”标签更新为所选国家/地区的名称：

<%= country_obj.name.titleize %>

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

Answer 3

根据我的理解，您希望使用bootstrap为您的html表单添加样式。如果是这种情况，那么你就是这样做的：

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

MenuFlyout

在gem 'bootstrap-sass', '~> 3.3.5'添加以下行，以便在每个页面添加引导样式：

app/assets/stylesheets/application.scss

2. 使用引导样式，在丑陋的选择标记中，您需要在类名称中添加@import "bootstrap-sprockets"; @import "bootstrap";作为引导文档建议。像这样添加form-control参数：

class: "form-control"

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

3 个答案: