通過軌道上的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' 

希望這個例子會有所幫助。