Откройте текстовое поле, когда в раскрывающемся списке в рельсах выбрано другое

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

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

Answer 2

$(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, поэтому она работает даже без ruby ​​на рельсах.
После того как вы получите суть этого, вы сможете портировать его для работы с вашим приложением rails.