Ruby on Rails: cuadro desplegable en el evento de cambio

Question

Tengo dos cuadros desplegables en mi aplicación. Según el valor seleccionado en el primer cuadro combinado, los valores en el segundo cuadro desplegable deben completarse. Y estos valores deben provenir de la Base de datos.

Por favor, ayúdame.

Answer 1

Puede inspirarse en lo que tengo en un proyecto mío. Actualiza el estado dado el país seleccionado. Se hace uso de una gran joya Carmen lista países, estados, etc ...

Vista:

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

Jquery código:

$('#profile_country').change(function() { 
    if ($(this).val() == '') 
    { 
    $('#profile_state').html($('<option>No state provided for your country</option>')); 
    } 
    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($('<option>No state provided for your country</option>')); 
     } 
     else 
     { 
     $('#profile_state').empty(); 
     $('#profile_state').append($('<option>Select your State</option>')); 
     jQuery.each(data,function(i, v) { 
      $('#profile_state').append($('<option value="'+ data[i][1] +'">'+data[i][0] +'</option>')); 
     }); 
     } 
    } 
    }); 
} 
}); 

controlador:

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

Answer 2

aquí está un enfoque limpio utilizando jquery-ujs (https://github.com/rails/jquery-ujs)

En su opinión:

<%= 
    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 
     "<option>Please select something from first select!</option>" 
%> 

su controlador:

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 

En sus 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 = $('<option/>'); 

     // value is an array: [:id, :name] 
     opt.attr('value', value[0]); 
     // set text 
     opt.text(value[1]); 
     // append to select 
     opt.appendTo(selectbox2); 
    }); 
    }); 

}); 

Answer 3

Esta es la forma en que lo hice. Trabaja en Rails 3.2

Ver:

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

método de control:

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 

Rutas:

get "listings/submit_major_category" 

a continuación, crear un archivo submit_major_category.js.erb que consigue respondió a.