• Registered: 2009-06-12
  • Posts: 106

Topic: Cascading Menu

Hey guys - Thanks for looking. 

I currently have a working select menu:

<% form_tag do %>
    <%= select (:project, :status, @status_options) %>
<% end %>

Where status_options is an array of arrays in the form of [[Option 1, option_1],[Option 2, option_2]etc].  This allows me to submit the "humanized" value through a "railsified" variable. 

What I'm trying to do now is show and hide certain DIVs according to what's been selected.  When Option 1 is selected, I want Option 2 and Option 3 DIVs to be hidden, and Option 1 to appear.  This is serving a mother-child select menu requirement. 

I currently have the DIVs set to style = "display: none", which I would like to toggle according to what's been selected.  I've seen a few javascript solutions, but I haven't found a sample that works with ruby.  Any help would be greatly appreciated - thanks again for looking smile.

  • Registered: 2009-06-12
  • Posts: 106

Re: Cascading Menu

I currently have the interface working, but not the submission.  

<% form_tag do %>
                    <%= select (:project, :status, @status_options, {:include_blank => nil},{:onchange => " if(this.value.match(/option1/i)){
$('option1').show(); } else {
$('option1').hide(); } 
if(this.value.match(/option2/i)){
$('option2').show(); } else {
$('option2').hide(); }  "})%>

My DIVs:

<div id = "option1" style = "display: none">
    <% form_tag do %>
        <%= select (:project, :probability, @status_option1) %>
    <% end %>
</div>
                
<div id = "option2" style = "display: none">
    <% form_tag do %>
        <%= select (:project, :probability, @status_option2) %>
    <% end %>
</div>

And my global "choices" from ApplicationContoller:

@status_option1 = [["Probability",nil],["High (70%)",0.7],["Medium (50%)",0.5],["Low (30%)",0.3]]
@status_option2 = [["Probability",nil],["High (50%)",0.5],["Medium (20%)",0.2],["Low (10%)",0.1]]

I couldn't get "else-if" to work, so I was rather crude.  If anyone sees an obvious reason why the probability variable isn't being submitted, let me know.  Thanks smile

  • Registered: 2009-06-12
  • Posts: 106

Re: Cascading Menu

After looking at the generated HTML, I now know it's because the "probability" is being passed as a string, as opposed to integer.  Trying to figure out how to get it passed as an int...  lol

  • Registered: 2009-06-12
  • Posts: 106

Re: Cascading Menu

Anyone out there?  I've tried to use partials but I'm not sure how to get this "concept" working.  I know I can't use render here...

<%= select (:project, :status, @status_options, {:include_blank => nil},{:onchange => render :partial => ("this.value" + "probs")})%>

  • From: Los Angeles, California
  • Registered: 2006-12-03
  • Posts: 347

Re: Cascading Menu

Hi,

Ok.. Here's what you can do:

<% form_tag do %>
    <%= select (:project, :status, @status_options) %>
<% end %>
<div id="project_options_contianer">
    <div id = "option_1" style = "display: none" class="project_option">
        <% form_tag do %>
            <%= select (:project, :probability, @status_option1) %>
        <% end %>
    </div>

# your other divs go here, but they all need the same "project_option" class
</div>
# application.js
document.observe("dom:loaded", function() {

  $('project_status').observe("change", function() {
    $('project_options_container').select('project_option').each(function(e){
      e.hide();
    })
    $(this).show();
  })
  
});

So what happens is, when you change the select, all divs are hidden, and then the one you actually did select is displayed.

And one other thing-- You have a problem because all of your project option selects have the same id... <%= select (:project, :probability, ...) %>  -- All your element ids need to have unique names, so you need to figure out a different way to do this.

Also your div ids need to match your @status_options values..  So if they are "option_1" in they array, the div needs to be "option_1" as well.

-patrick

Last edited by patrick99e99 (2009-08-30 02:43:57)

patrick99e99's Website