如何使用json数组填充Rails下拉菜单 [英] How to populate a Rails dropdown menu with a json array
问题描述
我有一个Ant显示页面,显示有关各种类型蚂蚁的详细信息。在那个页面上有两个下拉菜单,一个用于环境:[室内,室外],一个用于饮食:[糖,脂肪,蛋白质]。
I have an Ant show page that displays detailed information about various types of ants. On that page there are two drop downs, one for environment: [indoor, outdoor], and one for diet: [sugar, fat, protein].
当你选择每个参数都会根据参数提供产品页面。然而,一些组合导致零,就像木匠蚂蚁没有与室内糖相关的产品。
When you select a param from each it renders out a product page depending on the params. However, some combinations result in nil, like a carpenter ant doesn't have a product associated with indoor, sugar.
我正在尝试将下拉列表填入基础关于组合是否为零。如果有人选择室内,我会喜欢糖,如果该组合不存在则不会出现在下一个下拉。
I'm trying to get the dropdowns to populate based on whether or not a combination is nil. If someone selects indoor I'd like sugar to not appear in the next drop down if that combo doesn't exist.
到目前为止,我有两种创建json的方法仅用于可用项目的数组:
So far I have I have two methods creating json arrays for only the available items:
def food_sources
food_sources = Ant.find(params[:ant_id]).product_recommendations.where(environment: params[:environment]).map(&:diet)
render json: food_sources.to_json
end
def environments
environments = Ant.find(params[:ant_id]).product_recommendations.where(diet: params[:diet]).map(&:environment)
render json: environments.to_json
end
例如,如果输入
http://localhost:3000/ants/27/food_sources?environment=indoor
进入浏览器返回
["sugar","protein"]
bc对于id为27的蚂蚁只有两种户外室内饮食选择而不是可能的三个。
bc for the ant with an id of 27 only has two options for outdoor indoor diets, instead of the possible three.
我的问题是,如果有人选择了上述组合,如何将此数组传递到我的rails下拉列表中?
My question is how do I pass this array into my rails dropdown if someone picked the above combination?
编辑
= form_tag ant_product_recommendations_path(@ant.id), id: 'select_box', method: :get do |form|
%h3 What food source are they currently feeding on?
= select_tag :environment, options_for_select([["Select One"], "Indoor", "Outdoor"])
%h3
Locate the nest by following the ants back from their food source.
%br
Where is the nest located?
= select_tag :diet, options_for_select([["Select One"], "Sugar", "Fat", "Protein"])
= submit_tag "Find Solutions", class: 'submit button'
= link_to 'Go Back', '/', class: 'go_back'
推荐答案
在我看来,你想要动态填充下拉框,这样就可以进行ajax调用,如下所示:
It seems to me like you want to dynamically populate the dropdown box, which would lend itself to an ajax call, like this:
$('#select_box').on('change', function () {
$.ajax({
url: "/controller/action",
type: 'get',
data: $(this).serialize()
}).done(function (data) {
change_select(data);
});
});
function change_select(data) {
var json = jQuery.parseJSON(data);
var options = [];
json.each(function (key, index) {
options.push({text: index, value: key});
});
$("#select_box").replaceOptions(options);
};
这将允许您指定下拉列表的选项,您可以这样使用控制器:
This will allow you to specify the options of the dropdown, and you can use the controller in this way:
@food_sources = Ant.find(params[:ant_id]).product_recommendations.where(environment: params[:environment]).map(&:diet)
respond_to do |format|
format.json { render json: @food_sources }
end
这篇关于如何使用json数组填充Rails下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!