title: Fetch items via ajax request on rails
body: <p>So I have the select tag and embedded options tag. I got help here, <a href="https://stackoverflow.com/questions/31324802/jquery-filter-next-select-group-based-on-selection-of-previous-select-group">Jquery Filter next select group based on selection of previous select group</a>, 
  on how to filter the next select group based on selection of previous select group. </p>
  
  <p>There are a LOT of options in the deeper layers, so I want to know how I can do this with an ajax request. I would like the layer2 (and deeper layers) to be populated through ajax. </p>
  
  <p>Below is some toy html, again from here, <a href="https://stackoverflow.com/questions/31324802/jquery-filter-next-select-group-based-on-selection-of-previous-select-group">Jquery Filter next select group based on selection of previous select group</a>,
  demonstrating how to affect a deeper multiselect box with a previous layer using jquery that I got help from. </p>
  
  <pre><code>&lt;select id="layer1" multiple="multiple"&gt;
    &lt;option data-id="3"&gt;Chocolate&lt;/option&gt;
    &lt;option data-id="5"&gt;Cookie&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="layer2" data-depends-on="layer1" multiple="multiple"&gt;
    &lt;option data-parent="3" data-id="6"&gt;Milk Chocolate&lt;/option&gt;
    &lt;option data-parent="5" data-id="7"&gt;Sprinkled Cookie&lt;/option&gt;
    &lt;option data-parent="5" data-id="8"&gt;Iced Cookie&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script&gt;
  $("select").each(function(){
      // cache all options
      $(this).data('options', $('option', this));
  }).on('change', function(e){
      var current = this, selected = [];
  
      // find all selected for the current select and
      // store them in a local variable
      $('option:selected', current).each(function(){
          selected.push($(this).data('id'));
      });
  
      // find all selects that depend on this one.
      $("select").filter(function(){
          return $(this).data('depends-on') === current.id;
      }).each(function(){
          // search our cached options and filter them
          // by the selected option(s).  Store them in
          // a local variable.
          var children = $(this).data('options').filter(function(){
              return selected.indexOf($(this).data('parent')) &gt; -1;
          });
  
          // empty and repopulate the select with the
          // filtered results. Also, trigger the next
          // select so the effect cascades.
          $(this).empty().append(children).trigger('change');
      });
  }).trigger('change'); // trigger change so it filters
                        // on page load.
                        &lt;/script&gt;
  </code></pre>
  
  <p>Here is some rails code and corresponding view to give a sense of how I'm doing it with rails.
  Rails code</p>
  
  <pre><code>  def new
      @one = CategoryLevelOne.all.map { |c| [c.id, c.name] }
      @two = CategoryLevelTwo.all.map { |c| [c.id, c.name] }
    end
  </code></pre>
  
  <p>corresponding view</p>
  
  <pre><code>&lt;%=form_tag('/companies', method: :post)%&gt;
      &lt;select name="category_id[]" id="layer1" multiple="multiple" size="20"&gt;
        &lt;%= render 'companies/list/category_one' %&gt;
      &lt;/select&gt;
      &lt;select name="category_id2[]" data-depends-on="layer1" id="layer2" multiple="multiple" size="20"&gt;
        &lt;%= render 'companies/list/category_two' %&gt;
      &lt;/select&gt;
  &lt;%= submit_tag%&gt;
   //the same jquery script is used as in the above code
  </code></pre>
  
  <p>companies/list/_category_one.html.erb</p>
  
  <pre><code>&lt;% @one.each do |c| %&gt;
    &lt;option data-id=&lt;%=c[0]%&gt;  value=&lt;%=c[1]%&gt;&gt;&lt;%=c[1]%&gt;&lt;/option&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>I would like to do an ajax request, that does a GET request to a controller action, fetch an object, and using the object, create/update a bunch of option tags inside a specified select tag. </p>
  
  <p>So I imagine it would look something like this</p>
  
  <p>ajax request triggers a certain GET request for a certain controller action
  In that controller action, it gets a certain array of objects, and returns it in the form of json. 
  The javascript that takes that array and is able to do something similar to</p>
  
  <pre><code>&lt;% @one.each do |c| %&gt;
  &lt;option data-id=&lt;%=c[0]%&gt; style="color:&lt;%=c[2]%&gt;" value=&lt;%=c[1]%&gt;&gt;&lt;%=c[1]%&gt;&lt;/option&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>for a specific select tag.</p>