Question

I’ve been trying to implement what should be a pretty simple feature, but I’m not having much luck. I have a drop-down menu on my ROR app which prompts the user to Select a Country.

NOTE: The list of Countries is contained in the Constants.rb file (but basically the two available options are: Interantional and United States.)

What I would like to see happen: When a user selects “United States” the div id state_nav (a div containing a drop-down menu with a list of States) would show up… if the user selects International, the state_nav menu would remain hidden.

Here is what I had thus far in terms of code (I’m using HAML)

The javascript is located in the header of the html

:javascript
  function showDiv(obj)
  {
      if(obj[obj.selectedIndex].value == 'United States')
      {
          document.getElementById('state_div').style.display = 'block';
      }
      else
      {
          document.getElementById('state_div').style.display = 'none';
      }
  }

this is the code located in the body of the html.HAML

  .section
    %div{:class => "label_leftalign field"}
        %p.information
          please list the country, state (if applicable), and city where you're located
        = f.label :country, "Location"
        = f.select :country, COUNTRIES, :onChange => "showDiv(this)", :prompt => true

    %div{:class => "label_leftalign field"}
      #state_div{:style => "display:none;"}
          = f.label :state, " ".html_safe
          = f.select :state, STATES, :prompt => true

At present… when I load the page it the State drop-down (#state_div) is hidden, and it remains hidden regardless of what Country is selected.

Answer 1

First I would change :onChange to :onchange. Then throw an alert into your js to see if the JS is at least being called:

:javascript
  function showDiv(obj)
  {
      alert(obj[obj.selectedIndex].value);
      if(obj[obj.selectedIndex].value == 'United States')
      {
          document.getElementById('state_div').style.display = 'block';
      }
      else
      {
          document.getElementById('state_div').style.display = 'none';
      }
  }

UPDATED:

You can change your select to include missing hash param:

.section
  %div{:class => "label_leftalign field"}
      %p.information
        please list the country, state (if applicable), and city where you're located
      = f.label :country, "Location"
      = f.select :country, COUNTRIES, {}, :onChange => "showDiv(this)", :prompt => true
  %div{:class => "label_leftalign field"}
    #state_div{:style => "display:none;"}
        = f.label :state, " ".html_safe
        = f.select :state, STATES, :prompt => true

I tried that on my local and it worked. Make sure that the value of your option field reflects that value that you are asserting in obj[obj.selectedIndex].value.