Ruby on Rails - liste déroulante sur l'événement de changement

J'ai deux listes déroulantes dans mon application.
En fonction de la valeur sélectionnée dans la 1ère zone de liste déroulante, les valeurs dans la 2ème liste déroulante doit être rempli.Et ces valeurs doivent venir de la Base de données.

S'il vous plaît aider moi.

source d'informationauteur sanrda

  1. 16

    voici un propre approche à l'aide de jquery-ujs (https://github.com/rails/jquery-ujs)

    De votre point de vue:

    <%= 
  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>"
%>

    De Votre Contrôleur:

    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

    Dans votre 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);
    });
  });

});
  2. 9

    Vous pourraient s'inspirer de ce que j'ai dans un projet de mine. Il met à jour l'état étant donné que le pays sélectionné.
    Il fait usage de Carmen un joyau avec la liste des pays, états, etc...

    Vue:

    <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 code:

    $('#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>'));
         });
       }
     }
   });
 }
});

    Contrôleur:

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

    C'est la façon dont je l'ai fait. Œuvres dans les Rails 3.2

    Vue:

    <%= 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éthode de contrôleur:

    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

    Routes:

    get "listings/submit_major_category"

    Puis créer un submit_major_category.js.erb fichier qui obtient une réponse.