Question

我无法根据Rails 4中的选择框切换div。我试图在选择某个PRODUCT时在REQUEST表单上显示某些表单字段。我没有jquery经验 - 这是我到目前为止所做的，但没有bueno：

// assets/javascripts/requests.js.coffee

jQuery ->

    #//this handles product population based on category select and is working:

    $('#request_product_id').parent().hide()
    products = $('#request_product_id').html()
    emptyOption = $('<option />').attr('value', '');
    console.log(products)
    $('#request_category_id').change ->
        category = $('#request_category_id :selected').text()
        options = $(products).filter("optgroup[label='#{category}']").prepend(emptyOption).html()
        console.log(options)
        if options
            $('#request_product_id').html(options)
            $('#request_product_id').parent().show()
        else
            $('#request_product_id').empty()
            $('#request_product_id').parent().hide()


    #// this should handle <div> toggle based on product select, but nothing happens:

    $(document).ready ->
    $(".product").on "change", ->
    if $(this).val() is "6"
      $("#exit_employee").show()
      $("#new_employee").hide()
      $("#change_employee").hide()
    if $(this).val() is "7"
      $("#new_employee").show
      $("#exit_employee").hide()
      $("#change_employee").hide()
    if $(this).val() is "8"
      $("#change_employee").show
      $("#exit_employee").hide()
      $("#new_employee").hide()


    --------------
//.css

#exit_employee,
#new_employee,
#change_employee {
    display: none;
}

--------------

// _form.html.erb

<%= form_for(@request) do |f| %>

  <div class="field" id="category">
    <%= f.label :category_id, "Select a Category:" %>
    <%= f.collection_select(:category_id, Category.active.sorted, :id, :name, :include_blank => true ) %>
  </div>

  <div class="field" id="product">
    <%= f.label :product_id, "Select a Product/Service:" %>
    <%= f.grouped_collection_select :product_id, Category.active.sorted, :products, :name, :id, :name, include_blank: true %>
  </div>

  //THE ABOVE ALL WORKS -----  NOW....BASED ON PRODUCT SELECTED ABOVE, SHOW DIV BASED ON PRODUCT SELECTION


  <div>

    <div class="field" id="exit_employee"> 
        Product 6 Fields
    </div>

    <div class="field" id="new_employee">
        Product 7 Fields
    </div>

     <div class="field" id="change_employee">
        Product 8 Fields
     </div>

  </div>

 //ALWAYS SHOW REQUESTOR NOTE

    <div class="field" id="requestor_note">
        <%= f.label :requestor_note, "Please provide full details for your request:" %>
        <%= f.text_area :requestor_note %>
    </div>

    <div class="actions">
        <%= f.submit "Submit" %>
    </div>
<% end %>

Answer 1

您在<script>标记中使用的是coffeescript而不是javascript，但是您指定的是<script type="text/javascript">。

您可以将此更改为coffeescript，即<script type="text/coffeescript">。请参阅the explanation on coffeescript.org。

更好的做法是在rails项目中启用资产管道，从视图中删除<script>标记，并将coffeescript放在app/assets/javascripts下的文件中。有关详细信息，请参阅the rails asset pipeline guide。

另一个提示是在浏览器中启用devtools并查看javascript控制台。这是写入javascript错误消息的地方，包括JS语法错误。

祝你好运！

Answer 2

请注意你的缩进。在coffeescript中，缩进在某些情况下很重要

$(document).ready ->
$(".product").on "change", ->
if $(this).val() is "6"
  $("#exit_employee").show()
  $("#new_employee").hide()
  $("#change_employee").hide()
if $(this).val() is "7"
  $("#new_employee").show
  $("#exit_employee").hide()
  $("#change_employee").hide()
if $(this).val() is "8"
  $("#change_employee").show
  $("#exit_employee").hide()
  $("#new_employee").hide()

应该是

$(document).ready ->
  $(".product").on "change", ->
  if $(this).val() is "6"
    $("#exit_employee").show()
    $("#new_employee").hide()
    $("#change_employee").hide()
  if $(this).val() is "7"
    $("#new_employee").show
    $("#exit_employee").hide()
    $("#change_employee").hide()
  if $(this).val() is "8"
    $("#change_employee").show
    $("#exit_employee").hide()
    $("#new_employee").hide()

Rails 4 - 基于下拉选择显示/隐藏<div>的jQuery或Coffeescript </div>

2 个答案: