Javascript 在RubyonRails中使用带有If语句的Select选项表单

我的目标：创建一个表单，使用Ruby/Rails表单帮助程序和

if/elsif

语句为每个选择提供不同的值，以

show | hide

选项。（在块引号中设置工作JS代码）

我的问题：不确定如何将选项select values inruby/rails与

if/elsif

语句一起使用。此信息将由用户输入

Post

。（使用设计用户gem）

我是如何让事情正常运转的： 创建了一个带有JS函数的引导表单，根据选择方式显示|隐藏选项选择字段。（在my

\u form.html.erb

下面）

在我的Ruby Rails版本的底部表单中，我是否缺少任何东西来隐藏可选的走廊表单？它是否以rails格式正确构造

请原谅我缺少ruby rails语法，因为我正在学习，但找不到有关如何执行类似任务的资源，无法使用

if/elsif

语句执行

show | hide

选项选择表单

谢谢你的时间

表单操作说明：

  <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>

<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>

步骤1：选择等级级别

步骤2：选择走廊

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

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

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

My

\u 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>

<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表单版本：

选择等级级别
4.
5.
选择走廊
A.
B
C
选择可用的类
英语
西班牙的
德国的
选择可用的类
数学
科学类
健身房
选择可用的类
艺术
额外学分1
额外学分2

除了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可以帮助您生成select语句，这些语句应该来自服务器，而不是在视图中硬编码。如果您有一个带有hallway属性的类模型，您可以像这样生成select选项（这只是一个起点）：

---

查看一下。

除了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可以帮助您生成select语句，这些语句应该来自服务器，而不是在视图中硬编码。如果您有一个带有hallway属性的类模型，您可以像这样生成select选项（这只是一个起点）：

看一看这张照片