javascript - Fetch items via ajax request on rails -

so have select tag , embedded options tag. got here, jquery filter next select group based on selection of previous select group, on how filter next select group based on selection of previous select group.

there lot of options in deeper layers, want know how can ajax request. layer2 (and deeper layers) populated through ajax.

below toy html, again here, jquery filter next select group based on selection of previous select group, demonstrating how affect deeper multiselect box previous layer using jquery got from.

<select id="layer1" multiple="multiple">   <option data-id="3">chocolate</option>   <option data-id="5">cookie</option> </select>  <select id="layer2" data-depends-on="layer1" multiple="multiple">   <option data-parent="3" data-id="6">milk chocolate</option>   <option data-parent="5" data-id="7">sprinkled cookie</option>   <option data-parent="5" data-id="8">iced cookie</option> </select>  <script> $("select").each(function(){     // cache options     $(this).data('options', $('option', this)); }).on('change', function(e){     var current = this, selected = [];      // find selected current select ,     // store them in local variable     $('option:selected', current).each(function(){         selected.push($(this).data('id'));     });      // find selects depend on one.     $("select").filter(function(){         return $(this).data('depends-on') === current.id;     }).each(function(){         // search our cached options , filter them         // selected option(s).  store them in         // local variable.         var children = $(this).data('options').filter(function(){             return selected.indexof($(this).data('parent')) > -1;         });          // empty , repopulate select         // filtered results. also, trigger next         // select effect cascades.         $(this).empty().append(children).trigger('change');     }); }).trigger('change'); // trigger change filters                       // on page load.                       </script> 

here rails code , corresponding view give sense of how i'm doing rails. rails code

  def new     @one = categorylevelone.all.map { |c| [c.id, c.name] }     @two = categoryleveltwo.all.map { |c| [c.id, c.name] }   end 

corresponding view

<%=form_tag('/companies', method: :post)%>     <select name="category_id[]" id="layer1" multiple="multiple" size="20">       <%= render 'companies/list/category_one' %>     </select>     <select name="category_id2[]" data-depends-on="layer1" id="layer2" multiple="multiple" size="20">       <%= render 'companies/list/category_two' %>     </select> <%= submit_tag%>  //the same jquery script used in above code 

companies/list/_category_one.html.erb

<% @one.each |c| %>   <option data-id=<%=c[0]%>  value=<%=c[1]%>><%=c[1]%></option> <% end %> 

i ajax request, request controller action, fetch object, , using object, create/update bunch of option tags inside specified select tag.

so imagine this

ajax request triggers request controller action in controller action, gets array of objects, , returns in form of json. javascript takes array , able similar to

<% @one.each |c| %> <option data-id=<%=c[0]%> style="color:<%=c[2]%>" value=<%=c[1]%>><%=c[1]%></option> <% end %> 

for specific select tag.

here make make ajax call server on select tag change respective id data id.

then params[:id] , fetch respective data it, , attach data dynamically select tag ajax success. (recreate option tag dynamically.)

ex. 2 select tags - country & state

depending on country selection, state should change.

please refer below code it.

in view:

<%= f.select :country, @countries, id: "country" %>  <%= f.select :state, @states, id: "state" %> 

in js:

$("#country").change(function() {     $.ajax({       type: "get",       contenttype: "application/json; charset=utf-8",       url: "get_states/"+$(this).val(),       corssdomain: true,       datatype: "json",       success: function (data) {          var listitems = "<option value=''>select</option>";          $.each(data,function(key,value){          listitems+= "<option value='" + value.id + "'>" + value.state_name + "</option>";          });          $("#state").html(listitems);          //alert(json.stringify(data));       },        error : function(data) {        }    });  }); 

in controller -

def get_states   country = country.find_by_id(params[:id])   if country       @states = country.states     render :json => @states   end end 

in routes -

get 'get_states/:id' => 'users#get_states' 

hopefully example help.