Question

我有一个表格“ fundings”，其中有一个字段“ status”，为此我有一个选择字段。此选择字段的选项为["approved", "declined", "pending"]。我要的是选择“拒绝”后，将显示另一个文本框来解释拒绝的原因。请帮助该怎么做。

<%= form_for([@parent, @child, @funding], :html => {class: "form-horizontal",role: "form"}) do |form| %>
  <div class = "form-group">
    <div class="control-label col-sm-2">
      <%= form.label :status %>
    </div>

    <% if current_user.admin? %>
      <div class="col-sm-8">
        <%= form.select :status,['Pending', 'Approved', 'Declined'], class: "form-control" %>
      </div>
    <% else %>
      <!-- Disabled for non-admin users -->
    <% end %>
  </div>

  <!-- Submit button here -->
<% end %>

更新

     <div class="form-group">
  <%= "Status" %>
  <%= form.select :status, ['Pending', 'Approved', 'Declined'], {}, id: "sample-status-select", class: "form-control" %>
</div>
<div class="form-group">
  <%= "Decline Reason" %>
  <%= form.text_area :decline_reason, class: "form-control hidden", id: "decline-reason-textarea" %>
</div>
      </div> 
      <div class="form-group">
        <div class="col-sm-10">
          <%= form.submit "Apply", class: 'btn btn-primary btn-lg' %>
        </div>
      </div>
    </div>
  </div>

    <% end %>
<script type="text/javascript">
  <plain>
  $(function() {
    $("#sample-status-select").on("change", function() {
      var select_val = $(this).val();
      console.log(select_val);
      if (select_val === 'Declined') {
        $("#decline-reason-textarea").removeClass("hidden");
      } else {
        $("#decline-reason-textarea").addClass("hidden");
        $("#decline-reason-textarea").val("");
      }
    });
  });
  </plain>
</script>

Answer 1

$(function() {
  $("#sample-status-select").on("change", function() {
    var select_val = $(this).val(); // this gets the value of the dropdown menu
    console.log(select_val); // this just displays the selected value in the browser console (if you have the browser console open)

    if (select_val === 'Declined') {
      // if the 'Declined' option is chosen
      // we remove the 'hidden' class from the textarea
      $("#decline-reason-textarea").removeClass("hidden");
    } else {
      // if any other option is chosen
      // we put back the 'hidden' class to the textarea
      // also, we update the textarea value to BLANK (this part is optional, it depends if you want to keep the value of the textarea)
      $("#decline-reason-textarea").addClass("hidden");
      $("#decline-reason-textarea").val("");
    }
  });
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="https://httpbin.org/post" method="post">
  Status
  <select id="sample-status-select">
    <option value="Pending">Pending</option>
    <option value="Approved">Approved</option>
    <option value="Declined">Declined</option>
  </select>
  <br>
  <br> Decline Reason
  <textarea id="decline-reason-textarea" class="hidden">
  </textarea>
</form>

检查我制作的此代码段。它也应该为您工作。
这是一种基本的html格式，因此即使在没有红宝石的情况下也可以使用。
掌握了要点之后，您应该可以移植它以使其与Rails应用程序一起使用。

Answer 2

<script type="text/javascript">
  $(function() {
    $("#sample-status-select").on("change", function() {
      var select_val = $(this).val();
      console.log(select_val);
      if (select_val === "Declined") {
        $("#decline-reason-textarea").removeClass("hidden");
      } else {
        $("#decline-reason-textarea").addClass("hidden");
        $("#decline-reason-textarea").val("");
      }
    });
  });
</script>

在Rails的下拉列表中选择其他时，打开一个文本框

2 个答案: