Ruby on Rails – 更改事件的下拉框

我的应用程序中有两个下拉框。 根据第一个combobox中选择的值，应填充第二个下拉框中的值。这些值应来自数据库。

请帮我。

Answer 1

这是一个使用jquery-ujs的干净方法（https://github.com/rails/jquery-ujs）

在你看来：

<%= select_tag :first_select, # name of selectbox options_from_collection_for_select(@myrecords, "id", "name"), # your options for this select box :'data-remote' => 'true', # important for UJS :'data-url' => url_for(:controller => 'MyController', :action => 'getdata'), # we get the data from here! :'data-type' => 'json' # tell jQuery to parse the response as JSON! %> <%= select_tag :second_select, # name of selectbox "Please select something from first select!" %> 

你的控制器：

 class MyController < ApplicationController def getdata # this contains what has been selected in the first select box @data_from_select1 = params[:first_select] # we get the data for selectbox 2 @data_for_select2 = MyModel.where(:some_id => @data_from_select1).all # render an array in JSON containing arrays like: # [[:id1, :name1], [:id2, :name2]] render :json => @data_for_select2.map{|c| [c.id, c.name]} end end 

在你的application.js中：

 $(document).ready(function() { // #first_select is the id of our first select box, if the ajax request has been successful, // an ajax:success event is triggered. $('#first_select').live('ajax:success', function(evt, data, status, xhr) { // get second selectbox by its id var selectbox2 = $('#second_select'); // empty it selectbox2.empty(); // we got a JSON array in data, iterate through it $.each(data, function(index, value) { // append an option var opt = $(''); // value is an array: [:id, :name] opt.attr('value', value[0]); // set text opt.text(value[1]); // append to select opt.appendTo(selectbox2); }); }); }); 

Answer 2

你可以从我在我的项目中获得的灵感中获取灵感。 它会根据所选国家/地区更新州。 它利用Carmen一个伟大的gem列出国家，州等…

视图：

 
 Country * <%= profile_form.select(:country,Carmen.countries, {:include_blank => 'Select a Country'}, :id => "profile_country") %> 
 
 State * <%= profile_form.select(:state, "" , {:include_blank => 'Select a Country first'}, :id => "profile_state") %>  

Jquery代码：

 $('#profile_country').change(function() { if ($(this).val() == '') { $('#profile_state').html( $('No state provided for your country')); } else { $.ajax({ type: "GET", url: "/remote/get_states/" + encodeURIComponent($(this).attr('value')), success: function(data){ if (data.content == 'None') //handle the case where no state related to country selected { $('#profile_state').empty(); $('#profile_state').append( $('No state provided for your country')); } else { $('#profile_state').empty(); $('#profile_state').append( $('Select your State')); jQuery.each(data,function(i, v) { $('#profile_state').append( $(''+data[i][0] +'')); }); } } }); } }); 

控制器：

 def states begin render :json => Carmen::states(CGI::unescape(params[:country])) rescue render :json => {"content" => "None"}.to_json end end 

Answer 3

这就是我做到的。 适用于Rails 3.2

视图：

 <%= select_tag :major_category_select_id, options_from_collection_for_select(@majorcategories, 'id', 'name'), :'data-remote' => 'true', :'data-url' => url_for(:controller => 'listings', :action => 'submit_major_category', format: 'js') %> 

控制器方法：

 def submit_major_category @major_category = MajorCategory.find(params[:major_category_select_id]) @minor_categories = @major_category.minor_categories respond_to do |format| # format.html { render partial: 'minor_categories_select' } format.js end end 

路线：

 get "listings/submit_major_category" 

然后创建一个响应的submit_major_category.js.erb文件。