通过轨道上的ajax请求获取物品

Question

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

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

下面是一些玩具的HTML，从这里再次，Jquery Filter next select group based on selection of previous select group, 演示如何影响一个更深的multislect框与前一层使用jquery，我从中获得帮助。

<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代码

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请求控制器动作，获取对象以及使用该对象，在指定的选择标记内创建/更新一堆选项标记。

所以我想这将是这个样子

Ajax请求触发了一定的控制作用 在该控制器动作一定GET请求，它得到某个对象数组，并在形式返回它JSON。 这需要该数组，并能够针对特定选择标签做同样的事情到

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

的JavaScript。

Answer 1

在这里，我们使用相应的id数据id在选择标签更改时使ajax调用服务器。

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

Ex。 2选择标签 - 国家&州

根据国家选择，国家应该改变。

请参阅下面的代码。

在View：

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

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