刷新时显示隐藏的 div

Question

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

从保管箱中选择（美国）后，隐藏的 div 就会出现，用户可以继续填写表单。

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

我想知道如果保管箱中有正确的值，如何使 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';
    }
  };

然后，如果表单中存在美国，它将显示它。