如何使选择输入中的集合取决于另一个选择输入的值

时间:2014-11-28 17:02:47

标签: ruby-on-rails forms simple-form

我甚至不确定从哪里开始,所以如果有人甚至可以指出一个有用的潜在方向。

我的Rails应用程序中有一个表单,有两个选择输入。

这是独立选择

<%= collection_select(:pass, :route_id, Route.all, :id, :name) %>

这是依赖选择

<%= collection_select(:pass, :afternoon_trip, Trip.all, :id, :departure) %>

现在每条路线(来自独立选择)都有许多与之相关的行程。 Trip(相关)选择将所有行程显示为选项。

我想只在旅行中显示只选择属于所选路线的旅程。有关如何做到这一点的任何想法?

我还想在有人更改路线选择时更改行程选项,但这是次要问题。

谢谢!

2 个答案:

答案 0 :(得分:0)

我认为你想用一些ajax解决这个问题。获取所选选项的ID,将其发送到控制器,然后根据控制器发回的数据渲染新菜单。伪代码和coffeescript可能看起来像:

# javascript
selectMenu = $('menu selectors')
selectMenu.mouseUp ->
  selectedId = // get menu's selected id
  $.ajax "path/to/populate_dependant?selected_id=" + selectedId


# controller
def populate_dependant
  id = params[:selected_id]
  @collection = Model.where(attribute: id)
  respond_to do |format|
    format.js {}
  end
end


# populate_dependant.js.erb
// write javascript to append the following to your form:
<%= f.label :model %>
<%= f.collection_select :model_id, @collection, :id, :attribute_name, :prompt => "Select something" %>

答案 1 :(得分:0)

mouseUp事件在Steel的答案中不起作用,并且不清楚如何重新加载页面。以下对我有用。假定菜单所在的页面是{ "version": "2.0", "extensions": { "serviceBus": { "maxConcurrentCalls": 1 } } }控制器的show操作。

咖啡脚本是

trips

selectMenu = $('#route_select') selectMenu.change -> selectedID = $('#route_select :selected').text() $.ajax "/trips/populate_dependant?selected_id=" + selectedId 更改为

populate_dependant

这会将集合存储在会话中。然后在控制器的视图中创建一个新的Coffee脚本页面。

def populate_dependant
  id = params[:selected_id]
  session[:collection] = Model.where(attribute: id)
  respond_to :js
  render :populate_dependant
end

这将重新加载原始页面。然后将以下内容添加到#app/views/trips/populate_dependent.coffee.erb window.location.reload(); 操作

show

如果使用turbolinks,这将非常迅速地工作。