CoffeeScript 无法处理 Rails 4 应用程序中的下拉菜单

Question

我正在构建一个 Rails 4 健身相关应用程序来学习该框架。我的重点是改善用户体验，但我运行遇到了一个问题，试图将一些 CoffeeScript 代码合并到我的应用程序中。有问题的模型称为 StrengthExercise，并且有一个带有两个下拉菜单的表单。两个菜单都填充了另外两个 models/database 表中的内容：肌肉组和力量训练列表。力量练习模型包含以下声明：

belongs_to :muscle_group
belongs_to :strength_training_list

这是新力量练习表格中的相关代码：

<div class="field">
  <%= f.label :muscle_group %><br />
  <%= f.collection_select :muscle_group_id, MuscleGroup.order(:name), :id, :name, include_blank: true %>
</div>

<div class="field">
  <%= f.label :strength_exercise %><br />
  <%= f.grouped_collection_select :strength_training_list_id, MuscleGroup.order(:name), :strength_training_lists, :name, :id, :name, include_blank: true %>
</div>

这两个下拉菜单包含我的数据库表中的所需数据。那不是问题。这就是我卡住的地方：当用户 select 从第一个下拉菜单中选择一个肌肉群时，我希望 "event" 触发第二个下拉菜单的相关力量练习。完成此任务的数据在相应的表中可用，但它不起作用。

我研究了如何实现我想要的，并找到了一些有用的教程，包括 Ryan Bates 修订的第 88 集动态下拉菜单。为了实现我的 objective，我选择使用 CoffeeScript，因为它已经内置到 Rails 4。我遵循了 Bates 的教程，但由于某种原因，我的 CoffeeScript 无法正常工作。这是来自 strength_exercises.js.coffee 的脚本代码，它位于我的 apps/javascript/ 目录中：

jQuery ->
  strength_training_lists = $('#strength_exercise_strength_training_list_id').html()
  console.log(strength_training_lists)
  $('#strength_exercise_muscle_group_id').change ->
  muscle_group = $('#strength_exercise_muscle_group_id :selected').text()
  options = $(strength_training_lists).filter("optgroup[label='#{Muscle group}']").html()
  console.log(options)
  if options
    $('#strength_exercise_strength_training_list_id').html(options)
  else
    $('#strength_exercise_strength_training_list_id').empty()

脚本似乎没有触发更改事件。在浏览器中，当我在第一个下拉菜单中 select 肌肉群时，第二个下拉菜单中没有任何反应。第二个下拉菜单应该包含相关的力量练习，但它保持静态（不变）。数据可用于进行此操作，因此我怀疑我在实施过程中做错了什么。在浏览器中加载页面不会产生任何错误。我尝试使用 Firebug 对脚本进行故障排除。但是，我是编程新手，不知道如何使用该工具来解决问题。该脚本包含控制台日志操作，但我无法看到或理解出了什么问题。我即将实现我所寻求的用户体验，但确实需要一些帮助来解决 CoffeeScript 问题。对于实现我想要的下拉菜单功能的任何帮助，我将不胜感激。谢谢！

Answer 1

改变这个：

("optgroup[label='#{Muscle group}']")

对此：

("optgroup[label='#{muscle_group}']")

CoffeeScript 无法处理 Rails 4 应用程序中的下拉菜单

CoffeeScript not working on dropdown menus in Rails 4 application

javascript

jquery

ruby-on-rails

coffeescript

drop-down-menu