下拉显示/隐藏 div 的值并保持其状态答案

【问题标题】：value from dropdown show/hides div and keeps its state下拉显示/隐藏 div 的值并保持其状态
【发布时间】：2011-08-03 23:46:19
【问题描述】：

我对 ROR 比较陌生，希望对以下代码有所帮助。

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

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

有没有办法确保在做出正确选择后，该字段在页面加载时显示？而且我想有一种方法可以使相反的结果也成立-> 一个带有 display:block 的 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. cookie。

不幸的是，我不太精通 Javascript 或 jQuery……而且我从未在网站上实现过 cookie，并且如果可能的话，我宁愿避免使用它们。

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

【问题讨论】：

标签： javascript jquery ruby-on-rails drop-down-menu show-hide

【解决方案1】：

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

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

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

【讨论】：

对不起...这对我不起作用。我应该更改 HAML 中的某些内容以触发 jquery 功能吗？谢谢你的时间
如果您还没有这样做，您必须先将 jquery 添加到您的 rails 应用程序。使用 jquery-rails 宝石。但当然你可以在纯 javascript 中做同样的事情，只是更复杂。我真的建议您阅读有关 jquery 的更多信息。

【解决方案2】：

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

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

希望对您有所帮助！

【讨论】：

Carlos，这是有道理的，但是，我不确定我会怎么做（即：不知道要写什么代码）。但是，是的，你是对的……这看起来合乎逻辑。
希望这会有所帮助：jsfiddle.net/CarlosPF/8Y5QP 只需在选项之间复制粘贴 selected="selected" 并根据执行条件查看 div 是否可见。
当然，您必须在每次执行此操作时都运行该方法，以查看它在页面加载时是如何发生的。
Carlos，很遗憾，我无法添加该代码，因为我的选项字段位于 Constants.rb 中并且在 HAML 中不可用...除非有办法解决此问题。
由于我不熟悉您的项目，我建议将此代码放入 .js 文件中，然后在应用程序的主视图中引用此文件（视图/布局文件夹中的一个 erb 文件）。通过在整个应用程序中引用这个 javascript 文件，您应该能够以任何您认为合适的方式与 DOM 交互。另一方面，我自己对 HAML 并不熟悉，也许我对所有配置的方式假设太多。但是，好吧，你明白了。

【解决方案3】：

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

show hidden divs on refresh

【讨论】：