最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to populate a Rails dropdown menu with a json array - Stack Overflow

programmeradmin1浏览0评论

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 binations 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 bination is nil. If someone selects indoor I'd like sugar to not appear in the next drop down if that bo doesn't exist.

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_remendations.where(environment: params[:environment]).map(&:diet)
  render json: food_sources.to_json
end

def environments
  environments = Ant.find(params[:ant_id]).product_remendations.where(diet: params[:diet]).map(&:environment)
  render json: environments.to_json
end

For example, if input

http://localhost:3000/ants/27/food_sources?environment=indoor

into the browser it returns

["sugar","protein"]

bc for the ant with an id of 27 only has two options for outdoor indoor diets, instead of the possible three.

My question is how do I pass this array into my rails dropdown if someone picked the above bination?

EDIT

= form_tag ant_product_remendations_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'

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 binations 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 bination is nil. If someone selects indoor I'd like sugar to not appear in the next drop down if that bo doesn't exist.

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_remendations.where(environment: params[:environment]).map(&:diet)
  render json: food_sources.to_json
end

def environments
  environments = Ant.find(params[:ant_id]).product_remendations.where(diet: params[:diet]).map(&:environment)
  render json: environments.to_json
end

For example, if input

http://localhost:3000/ants/27/food_sources?environment=indoor

into the browser it returns

["sugar","protein"]

bc for the ant with an id of 27 only has two options for outdoor indoor diets, instead of the possible three.

My question is how do I pass this array into my rails dropdown if someone picked the above bination?

EDIT

= form_tag ant_product_remendations_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'
Share Improve this question edited Oct 16, 2013 at 16:16 reknirt asked Oct 15, 2013 at 23:03 reknirtreknirt 2,2645 gold badges30 silver badges50 bronze badges 4
  • Why json and not an ajax call? – trh Commented Oct 16, 2013 at 0:45
  • No reason. This was my first theory. I'm open to suggestions. – reknirt Commented Oct 16, 2013 at 0:47
  • Json should be used with an Ajax call in my opinion – Richard Peck Commented Oct 16, 2013 at 8:50
  • Is this a good or bad idea to allow open queries like this? – Kevin Brown Commented Feb 27, 2014 at 17:43
Add a ment  | 

1 Answer 1

Reset to default 7

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_remendations.where(environment: params[:environment]).map(&:diet)
  respond_to do |format|
    format.json { render json: @food_sources }
  end
发布评论

评论列表(0)

  1. 暂无评论