刷新时显示隐藏的 div

Question

我很难弄清楚如何使我的代码正常运行。我目前有一个在加载时隐藏的 div，一旦从 Dropbox 中进行选择，它就会发生变化。

一旦从 Dropbox 中选择（美国），隐藏的 div 就会出现，用户继续填写表单。

当用户保存表单，然后返回该页面时，我的问题出现了——> div 不再可见（我相信这是因为它的固有显示值设置为“none;”）。用户必须再次从下拉列表中选择正确的值（美国）才能查看 div。

我想知道如果 Dropbox 中有正确的值，如何使 div 在页面刷新时可见。我正在使用 HAML 进行编程，所有选项值（美国、国际）都位于 constants.rb 文件中。

我相信这可以通过 cookie（如果可能的话我想避免）或通过页面加载时的某种 jscript/jquery 验证来实现......不幸的是，我对其中任何一个都不熟悉那些东西，所以我恳请任何帮助。

非常感谢您抽出宝贵时间帮助我。谢谢！

HAML 代码：

= f.select :location, LOCATIONS, {}, :onChange => "showStates(this)", :prompt => true

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

Javascript：

函数 showStates(obj)

  {
    if(obj[obj.selectedIndex].value == 'United States')
    {
        document.getElementById('states_div').style.display = 'block';
    }
    else
    {
        document.getElementById('states_div').style.display = 'none';
    }
  }

Answer 1

您可以通过在页面加载时运行 showStates(this) 来实现。只需将其添加到模板的底部即可：

:javascript
  window.onload = function() {
    select_location = document.getElementById('<id of select tag generated for location>')
    if(select_location[select_location.selectedIndex].value == 'United States')
    {
      document.getElementById('states_div').style.display = 'block';
    }
    else
    {
      document.getElementById('states_div').style.display = 'none';
    }
  };

然后，如果美国出现在表格中，它将显示它。