Значение из выпадающего списка скрывает / показывает div (используя Javascript и Ruby on Rails) - PullRequest
Новая
       5

Значение из выпадающего списка скрывает / показывает div (используя Javascript и Ruby on Rails)

1 голос
/ 25 июля 2011

Я пытался реализовать довольно простую функцию, но мне не повезло. У меня есть раскрывающееся меню в приложении ROR, в котором пользователю предлагается выбрать страну.

ПРИМЕЧАНИЕ. Список стран содержится в файле Constants.rb (но в основном доступны два варианта: Международный и США.)

То, что я хотел бы видеть, происходит: когда пользователь выбирает «Соединенные Штаты», div id state_nav (div, содержащий раскрывающееся меню со списком состояний) будет отображаться ... если пользователь выбирает International, меню state_nav останется скрытым.

Вот то, что я имел до сих пор с точки зрения кода (я использую HAML)

JavaScript находится в заголовке 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';
      }
  }

это код, расположенный в теле 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

В настоящее время ... когда я загружаю страницу, раскрывающийся список состояния (#state_div) скрывается и остается скрытым независимо от выбранной страны.

1 Ответ

0 голосов
/ 25 июля 2011

Сначала я бы изменил: onChange на: onchange. Затем добавьте предупреждение в свой js, чтобы увидеть, вызывается ли хотя бы JS: 

: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';
      }
  }

ОБНОВЛЕНИЕ:

Вы можете изменить свой выбор, чтобы включить отсутствующий хеш-параметр: 

.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

Я попробовал это на своем местном, и это сработало. Убедитесь, что значение вашего поля параметров отражает то значение, которое вы указываете в obj [obj.selectedIndex] .value.

...