【问题标题】：Using Select Option forms with If statements in Ruby on Rails在 Ruby on Rails 中使用带有 If 语句的 Select Option 表单
【发布时间】：2016-01-17 18:22:29
【问题描述】：

我的目标：使用带有if/elsif 语句到show|hide 选项的Ruby/Rails 表单助手创建一个为每个选择提供不同值的表单。（在块引号中设置工作 JS 代码）

我的问题：不确定如何在 ruby/rails 中使用带有if/elsif 语句的选项选择值。此信息将从用户输入到Post。（使用设计用户gem）

我是如何让事情顺利进行的： 创建了一个带有 JS 函数的引导表单来显示 |根据选择的方式隐藏选项选择字段。（下面是我的_form.html.erb）

在底部表单的 Ruby Rails 版本中，我是否遗漏了最初隐藏可选 Hallway 表单的任何内容？它是否以 rails 格式正确构建？

请原谅我缺少 ruby rails 语法，因为我正在学习，但找不到有关如何使用 show|hide 选项选择带有 if/elsif 语句的表单的资源。

感谢您的宝贵时间。

表单如何运作的解释：

第 1 步：选择年级

第 2 步：选择走廊

-如果走廊 A，显示走廊 A 的选项选择

-如果走廊 B，显示走廊 B 的选项选择

-如果走廊 C，显示走廊 C 的选项选择

我的_form.html.erb：

  <div class="filter-third">
    <div class="styled-select styled-blue">
      <select id="post_gradelvl" name="post[gradelvl]">
        <option value="%">Select Grade Level</option>
        <option value="PS4">4</option>
        <option value="PS5">5</option>
      </select>
    </div>
  </div>

  <div class="filter-third">
    <div class="styled-select styled-blue">
      <select id="post_hallway" name="post[hallway]">
        <option value="%">Select Hallway</option>
        <option value="hallA">A</option>
        <option value="hallB">B</option>
        <option value="hallC">C</option>
      </select>
    </div>
  </div>

  <div class="filter-third"id="hallwayAFields" style="display: none;">
    <div class="styled-select styled-blue">
      <select id="post_hallAClasses" name="post[hallAClasses]">
        <option value="%">Select Available Classes</option>
        <option value="hallAclass1">English</option>
        <option value="hallAclass2">Spanish</option>
        <option value="hallAclass3">German</option>
      </select>
    </div>
  </div>

  <div class="filter-third"id="hallwayBFields" style="display: none;">
    <div class="styled-select styled-blue">
      <select id="post_hallBClasses" name="post[hallBClasses]">
        <option value="%">Select Available Classes</option>
        <option value="hallBclass1">Math</option>
        <option value="hallBclass2">Science</option>
        <option value="hallBclass3">Gym</option>
      </select>
    </div>
  </div>

  <div class="filter-third"id="hallwayCFields" style="display: none;">
    <div class="styled-select styled-blue">
      <select id="post_hallCClasses" name="post[hallCClasses]">
        <option value="%">Select Available Classes</option>
        <option value="hallCclass1">Art</option>
        <option value="hallCclass2">Extra Cred 1</option>
        <option value="hallCclass3">Extra Cred 2</option>
      </select>
    </div>
  </div>

我的 JS 为每个走廊选择一个 show|hide 选项：

<script>
  $("#post_hallway").change(
    function(){
      if ($("#post_hallway").val() == "hallA") {
        $("#hallwayAFields").show();
      } else {
        $("#hallwayAFields").hide();
      }
      if ($("#post_hallway").val() == "hallB") {
        $("#hallwayBFields").show();
      } else {
        $("#hallwayBFields").hide();
      }
      if ($("#post_hallway").val() == "hallC") {
        $("#hallwayCFields").show();
      } else {
        $("#hallwayCFields").hide();
      }
    }
  );
</script>

我对 Ruby Rails 表单版本的尝试是我的目标：

      <div class="option-select">
        <%= f.option-select :gradelvl %>
          <select id="post_gradelvl" name="post[gradelvl]">
            <option value="%">Select Grade Level</option>
            <option value="PS4">4</option>
            <option value="PS5">5</option>
          </select>
      </div>

      <div class="option-select">
        <%= f.option-select :hallway %>
          <select id="post_hallway" name="post[hallway]">
            <option value="%">Select Hallway</option>
            <option value="hallA">A</option>
            <option value="hallB">B</option>
            <option value="hallC">C</option>
          </select>
      </div>

  <% if :hallAClasses %>

      <div class="filter-third" id="hallwayAFields">
        <%= f.option-select : hallAClasses %>
          <select id="post_hallAClasses" name="post[hallAClasses]">
            <option value="%">Select Available Classes</option>
            <option value="hallAclass1">English</option>
            <option value="hallAclass2">Spanish</option>
            <option value="hallAclass3">German</option>
          </select>
      </div>

<% elsif :hallBClasses %>

      <div class="filter-third"id="hallwayBFields">
        <%= f.option-select : hallBClasses %>
          <select id="post_hallBClasses" name="post[hallBClasses]">
            <option value="%">Select Available Classes</option>
            <option value="hallBclass1">Math</option>
            <option value="hallBclass2">Science</option>
            <option value="hallBclass3">Gym</option>
          </select>
      </div>

<% else :hallCClasses %>

      <div class="filter-third"id="hallwayCFields">
        <%= f.option-select : hallCClasses %>
          <select id="post_hallCClasses" name="post[hallCClasses]">
            <option value="%">Select Available Classes</option>
            <option value="hallCclass1">Art</option>
            <option value="hallCclass2">Extra Cred 1</option>
            <option value="hallCclass3">Extra Cred 2</option>
          </select>
      </div>

<% end %>

【问题讨论】：

标签： javascript jquery ruby-on-rails twitter-bootstrap

【解决方案1】：

除了 Rails 视图中的语法问题之外，这里还有一个更基本的问题：视图模板会生成一个“静态”HTML 页面，该页面仅包含加载页面时选择的走廊的选择选项。您的 JavaScript 将无法工作，因为没有其他要显示的内容。

如果不管理 JavaScript 中的显示/隐藏，就无法做你想做的事。因此，您的 Rails 视图模板必须为所有走廊呈现 select。

最重要的是，如果用户正在编辑现有对象，您必须在页面加载后立即运行 JavaScript，以隐藏需要立即隐藏的内容。更好的是，当您加载页面时，所有内容都应该被隐藏，因此脚本只会显示需要存在的内容。基本上是这样的：

updateVisibleClasses = function(){
  if ($("#post_hallway").val() == "hallA") {
    $("#hallwayAFields").show();
  } else {
    $("#hallwayAFields").hide();
  }
  if ($("#post_hallway").val() == "hallB") {
    $("#hallwayBFields").show();
  } else {
    $("#hallwayBFields").hide();
  }
  if ($("#post_hallway").val() == "hallC") {
    $("#hallwayCFields").show();
  } else {
    $("#hallwayCFields").hide();
  }
}

$(document).ready(updateVisibleClasses);
$("#post_hallway").change(updateVisibleClasses);

Rails 可以帮助您生成选择语句，这些语句应该来自服务器，而不是在视图中硬编码。如果您有一个具有走廊属性的 Class 模型，您可以像这样生成选择选项（这只是作为起点）：

<%= form_for @name_of_your_model do |f| %>

  <!-- Take care of the grade level here -->

  <% @hallways.each do |hallway| %>
    <%= f.select 'hallway', 'class_id', Class.where(hallway_id: hallway.id).collect {|c| [ c.name, c.id ] }, { include_blank: true }) %>
  <% end %>
<% end %>

看看documentation for the select form helper。

【讨论】：