下拉列表中的值显示/隐藏 div 并保持其状态

Question

我对 ROR 比较陌生，希望获得有关以下代码的帮助。

当从下拉列表中进行特定选择（“客户”）时，我想显示一个 div（称为人口统计）。如果从下拉列表中选择“客户”以外的选项，我希望人口统计 div 保持隐藏。

目前，我的代码部分工作。它显示和隐藏div；但是，当我保存页面并返回时，即使在下拉列表中选择了“客户”，div 也会被隐藏。这可能是因为默认设置是：display:none。

有没有办法确保在做出正确选择后该字段显示在页面加载上？我想有一种方法可以使相反的情况成立-->带有显示的 div：块；如果下拉列表中的字段与必填字段不匹配，则保持隐藏状态。

任何帮助将不胜感激。谢谢您，我真诚地感谢您的时间：

我的代码（HAML）：

= f.select :who, WHO, {}, :onChange => "showDemographics(this)", :prompt => true

#demographics{:style => "display:none;"}
  %p.information
    please fill out the following demographics.
  %div{:class => "label_leftalign field"}
    = f.label :age, "Age"
    = f.select :age, AGES, :prompt => true
  %div{:class => "label_leftalign field"}
    = f.label :race, 
    = f.select :race, RACES, :prompt => true

Javascript

  function showDemographics(obj)
  {
    if(obj[obj.selectedIndex].value == 'Customer')
    {
        document.getElementById('demographics').style.display = 'block';
    }
    else
    {
        document.getElementById('demographics').style.display = 'none';
    }
  }

编辑:: 好的，所以关键问题是，在页面重新加载时，即使下拉框中有正确的值，div 仍然隐藏。我想这可以通过以下两种方法之一来解决：1.每次加载页面时运行某种验证或2.cookies。

不幸的是，我不太熟悉 Javascript 或 jQuery...并且我从未在网站上实现过 cookie，并且希望尽可能避免使用它们。

谁能帮我编写一个脚本来验证下拉列表中是否存在 Customer 并相应地显示/隐藏 div？谢谢您，并感谢 Carlos Pardilla 和 M. Cypher 迄今为止提供的帮助。

Answer 1

尽管您没有在代码中使用它，但您已使用 jQuery 标记了问题，但我假设如果我给您一些 jQuery 代码就可以了：

$(function() {
  $('#who').change(function() {
    if ($(this).val() == 'Customer') {
      $('demographics').show();
    } else {
      $('demographics').hide();
    }
  }).change();
}

请注意，您需要为 select 提供一个id（在本例中为who）才能正常工作。

Answer 2

我想您可以使用条件语句在页面加载期间进行检查。您可以根据选项的值（“客户”）确定 div 的可见性（或缺乏可见性）：选择对象（下拉列表）中的所选元素。也许通过文档头部的脚本（前提是它是一个简短的脚本）。此外，通过这样做，您不需要从一开始就设置显示属性。它会根据页面加载期间所选的条件触发。

正如您所说，这样做也可以得到相反的结果。

希望它会有所帮助！

Answer 3

上面的答案以自己的方式正确...下面的链接显示了页面加载条件语句所需的实际代码：

刷新时显示隐藏的 div