Извлечь элементы через запрос ajax на рельсах

Question

Итак, у меня есть тег select и встроенные параметры. Я получил помощь здесь, Jquery Filter next select group based on selection of previous select group, о том, как отфильтровать следующую группу выбора на основе выбора предыдущей группы выбора.

В более глубоких слоях есть много вариантов, поэтому я хочу знать, как я могу это сделать с помощью запроса ajax. Я хотел бы, чтобы слой2 (и более глубокие слои) заполнялся через ajax.

Ниже приведена информация о некоторых игрушках html, от Jquery Filter next select group based on selection of previous select group, , демонстрирующих, как воздействовать на более глубокий многосегментный блок с предыдущим слоем, используя 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 код

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.

Так что я предполагаю, что это будет выглядеть как этот запрос Ajax

вызывает определенный запрос GET для определенного действия контроллера В этом действии контроллера, он получает определенный массив объектов, и возвращает его в виде JSON. Javascript, который принимает этот массив и способен сделать что-то похожее на

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

для конкретного выбора тега.

Answer 1

Здесь мы делаем make ajax-вызов для сервера при изменении тега select с соответствующим идентификатором id.

Затем из params [: id] и выберите из него соответствующие данные и динамически присоедините эти данные к другому тегу select из ajax success. (динамически обновлять тег опции.)

Ex. 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' 

Надеюсь, этот пример поможет.