javascript - 通过Rails上的Ajax请求获取项目

所以我有选择标签和嵌入式选项标签。我在这里得到了帮助，Jquery Filter next select group based on selection of previous select group，
关于如何根据上一个选择组的选择来过滤下一个选择组的信息。

在更深的层中有很多选项，因此我想知道如何使用ajax请求来做到这一点。我希望通过ajax填充layer2（以及更深层）。

下面是一些玩具html，再次从这里Jquery Filter next select group based on selection of previous select group，
演示了如何使用从我那里得到帮助的jquery影响上一层的更深的multiselect框。

<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 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')) > -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.
                      </script>

这是一些Rails代码和相应的视图，以使我了解如何使用Rails。
Rails代码

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

对应视图

<%=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 is used as in the above code

公司/列表/_category_one.html.erb

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

我想做一个ajax请求，该请求对控制器操作执行GET请求，获取一个对象，并使用该对象在指定的select标签内创建/更新一堆option标签。

所以我想它看起来像这样

ajax请求触发某个控制器操作的某个GET请求
在该控制器操作中，它获取特定的对象数组，并以json的形式返回。
使用该数组并能够执行类似操作的javascript

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

用于特定的选择标签。

最佳答案

在这里，我们通过选择具有相应id数据id的select标记对服务器进行ajax调用。

然后从params [：id]并从中获取相应的数据，并将此数据动态地附加到ajax成功的另一个选择标签上。（动态重新创建选项标签。）

例如2选择标签-国家和州

根据国家/地区的选择，州应改变。

请参考下面的代码。

在视图中：

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

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

在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) {

      }
   });
 });

在控制器中-

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

在途中-

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

希望这个例子会有所帮助。

关于javascript - 通过Rails上的Ajax请求获取项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31330464/

SELECT

javascript - 通过Rails上的Ajax请求获取项目