我正在尝试在rails应用上实现ajax下拉列表。当我选择类别时，子类别下拉列表应根据所选类别填充子类别。目前，只有当我选择类别并输入“过滤器”并进入下一页时，才会填充子类别下拉列表。我有如下控制器方法：
控制器
def index
@categories = Category.roots.active.all
if (params.keys & ['category_id', 'sub_category_id']).present?
if params[:category_id].present?
@category = Category.active.find params[:category_id]
else
@category = Category.active.find params[:sub_category_id] if params[:sub_category_id].present?
end
end
@root_categories = Category.active.roots
@sub_categories = @category.children.active if params[:category_id].present?
@sub_categories ||= {}
@wanted_equipments = WantedEquipment.Approved.filter(params.slice(:category_id, :sub_category_id)).order("created_at desc").page(params[:page]).per(per_page_items)
end
def fetch_sub_categories
category = Category.active.where(id: params[:category_id].to_i).first
sub_categories = category.present? ? category.children.active : []
render json: sub_categories, status: 200
end
这是js文件 的 equipment.js
$(document).ready(function($) {
// Fetch sub-categories as per category selected
$("select#category_id, select#wanted_equipment_category_id").selectric().change(function(e){
$.getJSON("/fetch_sub_categories",{category_id: $(this).val(), ajax: 'true'}, function(response){
var options = '';
for (var i = 0; i < response.length; i++) {
options += '<option value="' + response[i].id + '">' + response[i].name + '</option>';
}
if (e.target.id=="category_id"){
$("select#sub_category").html('<option value="">Sub-Category</option>'+options);
var Selectric = $('select#sub_category').data('selectric');
Selectric.init();
}
if (e.target.id=="wanted_equipment_category_id"){
$("select#wanted_equipment_sub_category_id").html('<option value="">Select Sub-Category</option>'+options);
var Selectric = $('select#wanted_equipment_sub_category_id').data('selectric');
Selectric.init();
}
})
})
$(document).ajaxStop(function () {
$('.loader').hide();
});
$(document).ajaxStart(function () {
$('.loader').show();
});
});
这是 index.html.erb 文件
<%= form_tag filter_wanted_equipments_path, :method => 'get' do %>
<%= select_tag "category_id", options_from_collection_for_select(@categories, "id", "name", params[:category_id]), :prompt=>"Select Category", id: "search_category" %>
<%= select_tag "sub_category_id", options_from_collection_for_select(@sub_categories, "id", "name", params[:sub_category_id]), :prompt=>"Sub-Category" %>
<%= hidden_field_tag( 'category_id', params[:category_id]) if params[:category_id].present? %>
<%= hidden_field_tag( 'sub_category_id', params[:sub_category_id]) if params[:sub_category_id].present? %>
<%= submit_tag "filter-", :name => nil, style: "display:none;", id: 'filter-submit' %>
<% end %>
routes.rb 文件
resources :wanted_equipments do
get "/fetch_sub_categories" => 'wanted_equipments#fetch_sub_categories'
collection do
get 'search'
get 'filter'
end
end
答案 0 :(得分：0)
代码：
index.html.erb
<div>
<%= f.collection_select :vertical, @verticals, :vertical, :vertical, {:prompt => "Select a Vertical"}, {:class => "dropdown_vertical btn btn-default dropdown-toggle"} %>
<%= f.collection_select :subVertical, @subVerticals, :subVertical, :subVertical, {:prompt => "Select a Sub Vertical"}, {:class => "dropdown_subVertical btn btn-default dropdown-toggle"} %>
</div>
custom.js
$("#search_vertical").on('change', function(){ var listitems = []; $.ajax({ url: "populate_subVerticals", type: "GET", data: {vertical_name: $(this).val()}, success: function(data) { $("#search_subVertical").children().remove(); $("#search_subVertical").append('<option value=>' + "Select a Sub Vertical" + '</option>'); $.each(data,function(key, value) { listitems += '<option value="' + value.subVertical + '">' + value.subVertical + '</option>'; }); $("#search_subVertical").append(listitems); } }) });
控制器
def populate_subVerticals vertical_name = params[:vertical_name] @verticals = Vertical.where(:vertical => vertical_name).select("id","subVertical").all respond_to do |format| format.json { render json: @verticals } end end
routes.rb文件
'populate_subVerticals', to: 'verticals#populate_subVerticals'
答案 1 :(得分：0)
以下是我用于填充动态下拉列表的一段代码。
index.html.erb - ＆gt; dd1_id是静态下拉列表，一旦选择dd1_id，将填充dd2_id下拉列表。
<tr>
<td class="td1"></td>
<td class="td2"><span class="">Drop Down 1:</span></td>
<td><%=f.select :dd1_id, options_for_select(@abc.collect { |abc| [abc.type_name.upcase, abc.type_name.upcase] }, 0), {prompt: "-- Select --"}, { id: 'dd_1_select',:style => "width:300px"} %></td>
</tr>
<tr>
<td class="td1"></td>
<td class="td2"><span class="">Drop Down 2:</span></td>
<td><%=f.select :dd2_id, options_for_select([""]), {}, {:id => "dd_2_select",:style => "width:300px;"} %></td>
</tr>
device.js - ＆gt;它有一个onchange函数，用于检查是否使用值选择了dd1_id下拉列表，然后触发了一个名为update_dd2的函数，该函数捕获dd1_id值并点击下面ajax请求中指定的url。
$('#dd_1_select').on('change', function(){
if ($("#dd_1_select option:selected").val() != ""){
update_dd2();
$('#dd_2_select').val('');
}
});
function update_dd2() {
$.ajax({
url: '/update_dd_2',
data: {
dd1_value: $("#dd_1_select option:selected").val()
},
method: 'GET',
dataType: 'script',
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
success: function(){
console.log("Dynamic dd_2 select OK!");
$('#dd_2_select').prop('disabled',false);
},
failure: function(error){
console.log("AJAX FAILURE: "+error);
alert("Something went wrong, Please try again later.");
},
error: function(error){
console.log("AJAX ERROR: "+error);
alert("Oops! there was an error, Please reload the page and try again.");
}
});
}
}
routes.rb - ＆gt; ajax请求中指定的url将重定向到某个操作
get "update_dd_2" => "abc#update_dd_2", :as => "update_dd_2"
控制器/动作 - ＆gt;根据从第一个下拉列表中选择的值，它获取填充第二个下拉列表所需的数据
def update_dd_2
@values = SomeTable.where("id in (?)", params[:dd1_value])
respond_to do |type|
type.js
end
end
dd1_value.js - ＆gt;上面的操作会在视图中看到.js文件 这将呈现对html文件的部分响应，并且下拉列表将填充适当的值
$("#dd_2_select").empty().append("<%= escape_javascript(render(:partial => @values )) %>");