Question

I am trying to make a form that starts with 3 select drop down menus. Pretty standard —

The selection of drop down 1 populates the options in drop down 2

Then,

The selection of drop down 2 populates the options in drop down 3

I have followed sled‘s answer to a simular question here, https://stackoverflow.com/a/6864321/766817 but I can’t figure out (using his example), how to add a third element into the mix. Here is what I have so far…

_form.html.erb

<%= select_tag  :first_select,
("<option>Product Grade...</option>" + options_from_collection_for_select(@product_grades, "id", "product_grade")).html_safe,
  :'data-remote' => 'true',
  :'data-url' => url_for(:controller => 'product_grades', :action => 'getdata'), 
  :'data-type' => 'json'
%>

<%= select_tag  :second_select,
  :'data-remote' => 'true',
  :'data-url' => url_for(:controller => 'vendors', :action => 'getdata'), 
  :'data-type' => 'json'
%>

<%= select_tag :third_select %>

application.js

$('#first_select').live('ajax:success', function(evt, data, status, xhr) {

  var selectbox2 = $('#second_select');

  selectbox2.empty();

  $.each(data, function(index, value) {
    var opt = $('<option/>');

    opt.attr('value', value[0]);
    opt.text(value[1]);
    opt.appendTo(selectbox2);
  });
});


$('#second_select').live('ajax:success', function(evt, data, status, xhr) {

  var selectbox3 = $('#third_select');

  selectbox3.empty();

  $.each(data, function(index, value) {
    var opt = $('<option/>');
    opt.attr('value', value[0]);
    opt.text(value[1]);
    opt.appendTo(selectbox3);
  });
});

And finally, I have the getdata actions in both the ProductGradesController and the VendorsController

ProductGradesController

def getdata
  @data_from_select1 = params[:first_select]
  @data_for_select2 = Vendor.where(:product_grade_id => @data_from_select1).all
  render :json => @data_for_select2.map{|c| [c.id, c.vendor_name]}
end

VendorsController

def getdata
  @data_from_select2 = params[:second_select]
  @data_for_select3 = ItemCode.where(:vendor_id => @data_from_select2).all
  render :json => @data_for_select3.map{|a| [a.id, a.item_code]}
end

Currently, the first two steps work, however the third step produces a select box but no data populates it when you select an option from the first two steps.

I am pretty new at jQuery AJAX queries and such, so I am sure I am doing something wrong there, but any ideas? Thanks!!

Answer 1

Okay, so for anybody who encounters a similar issue in the future, I actually ended up taking a different route…

The amount of data these drop downs will be handling won’t be very much, so I actually integrated a non AJAX’d approach to this with a jQuery plugin called jQuery Chained (https://github.com/tuupola/jquery_chained)

This simply enables/disables the drop down options depending on the selection made in the previous drop down. This wouldn’t be a very good solution if your drop downs are populated with a lot of db data, or if you needed to have a security layer on what the drop downs show, as the options are added/removed from the DOM, meaning it would be easy for someone to see all of the data by viewing the source code.

HomeOnRails blog has a great post about how to integrate this jQuery Chained plugin into your rails app. (http://homeonrails.blogspot.com/2012/01/rails-31-linked-dropdown-cascading.html)

Enjoy and good luck!