使用 Java 脚本显示/隐藏输入字段的简单表单无法在显示和隐藏之间正确切换

Question

我试图让字段 "reason_for_skipping" 在 "skip_option" 为 "Yes" 时显示，在 "No" 时隐藏。我希望 "show / hide" 动作在选择 "Yes" 或 "No" 时动态播放。不幸的是，只有在我使用按钮 "Update Option" 将数据保存到数据库后，才会发生这种情况。当 "Skip" 为 "No" 并且 "reason_for_skipping" 被隐藏时，也需要在操作下显示 "Start Assessments"，反之亦然。使用 select_tag 而不是 f.select 的此代码的先前版本按预期工作。我切换到表单版本，因为我需要将值保存在数据库中。

这是我的代码：

<%= simple_form_for(@option) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">

    <h1>Select to Start or Skip Assessments</h1>

    <br>

    <table>
      <thead>
        <th>Action</th>
        <th>Skip</th>
        <th>Reason for skipping</th>
      </thead>
      <tbody>
        <tr>
          <td>
            <%= link_to 'Start assessments', url_for(controller: :assessments, action: :index), id: 'start_assessment' %>
          </td>
          <td>
            <%= f.select :skip_option, options_for_select([ "Yes", "No" ], :selected => f.object.skip_option), onchange: "reason_picker()" %>
          </td>
          <td>
            <%= f.text_field :reason_for_skipping, id: 'reason_for_skipping' %>
          </td>
        </tr>
      </tbody>
    </table>

  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

<script type="text/javascript">
  $(document).ready (
    window.reason_picker = function () {
      var selected = document.getElementById("option_skip_option").value;
      if (selected == "Yes") {
        $("#reason_for_skipping").show();
        $("#start_assessment").hide();
      }
      else if (selected == "No"){
        $("#reason_for_skipping").hide();
        $("#start_assessment").show();
      }
    }
  );
</script>

不确定我在这里遗漏了什么？

Answer 1

select helper 接受两个选项散列，html 选项的一个是 second，所以你所要做的就是传递一个空散列作为第一个选项。

f.select :skip_option, options_for_select([ "Yes", "No" ], :selected => f.object.skip_option), {}, onchange: "reason_picker()"

使用 Java 脚本显示/隐藏输入字段的简单表单无法在显示和隐藏之间正确切换

Simple Form using Java script for show / hide entry field does not switch properly between show and hide

javascript

ruby-on-rails

simple-form