带有 ajax 动作的 Rails select_tag(Rails 3 和 jQuery) [英] Rails select_tag with ajax action (Rails 3 and jQuery)

问题描述

我有以下选择列表.

<%= select_tag "project_id", options_from_collection_for_select(@projects, "id", "title") %>

当用户从上面的列表中选择一个选项时，下面的列表应该根据上面的选择用数据库中的值填充.

<%= select_tag "version_id", options_from_collection_for_select(??project.versions??, "id", "title") %>

我认为我应该使用 onchange 事件，但我不知道如何使用它.请有人帮助我.谢谢！

解决方案

Javascript

function update_versions_div(project_id) {jQuery.ajax({url: "/update_versions",类型:获取"，数据:{project_id":project_id}，数据类型:html"成功:功能(数据){jQuery("#versionsDiv").html(data);}});}

控制器

def 编辑@projects = Project.all@versions = Version.all结尾定义更新版本@versions = Version.where(project_id => params[:project_id]).all渲染:部分=>"版本", :object =>@版本结尾

查看

<%= select_tag "project_id", options_from_collection_for_select(@projects, "id", "title"), :prompt =>"选择一个项目", :onchange =>"update_versions_div(this.value)" %><div id="versionsDiv"><%=渲染:部分=>'版本', :object =>@版本 %>

部分:_version.html.erb

<%= select_tag "version_id", options_from_collection_for_select(versions, "id", "title"), :prompt =>选择一个版本"%>

同时在你的 routes.rb 中为 /update_versions 添加一个路由

匹配/update_versions"=><控制器>#update_versions"

在这里，您应该将 替换为控制器的名称.

我没有测试代码，所以可能有错误.

更新

PullMonkey 用 Rails 3 示例更新了代码，明显比这段代码优越.请查看 http://pullmonkey.com/2012/08/11/dynamic-select-boxes-ruby-on-rails-3/ 也

I have the following select list.

<%= select_tag "project_id", options_from_collection_for_select(@projects, "id", "title") %>

When the user selects an option from the above list, the list below should be populated with values from database based on the above selection.

<%= select_tag "version_id", options_from_collection_for_select(??project.versions??, "id", "title") %>

I think i should make use of the onchange event, but i have no idea on how to use it. Someone help me please. Thanks!

解决方案

Javascript

function update_versions_div(project_id) {  
  jQuery.ajax({
    url: "/update_versions",
    type: "GET",
    data: {"project_id" : project_id},
    dataType: "html"
    success: function(data) {
      jQuery("#versionsDiv").html(data);
    }
  });
}

Controller

def edit
  @projects = Project.all
  @versions = Version.all
end

def update_versions
  @versions = Version.where(project_id => params[:project_id]).all
  render :partial => "versions", :object => @versions
end

View

<%= select_tag "project_id", options_from_collection_for_select(@projects, "id", "title"), :prompt => "Select a project", :onchange => "update_versions_div(this.value)" %>
<div id="versionsDiv">
  <%= render :partial => 'versions', :object => @versions %>
</div>

Partial: _version.html.erb

<%= select_tag "version_id", options_from_collection_for_select(versions, "id", "title"), :prompt => "Select a version" %>

Also add a route for /update_versions in your routes.rb

match "/update_versions" => "<controller>#update_versions"

Here, you should replace <controller> with name of the controller.

I havent tested the code, so there may be errors.

Update

PullMonkey has updated the code with Rails 3 example, which is obviously superior than this code. Please checkout http://pullmonkey.com/2012/08/11/dynamic-select-boxes-ruby-on-rails-3/ also

这篇关于带有 ajax 动作的 Rails select_tag(Rails 3 和 jQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！