CoffeeScript 不适用于 Rails 4 应用程序中的下拉菜单

Question

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

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>

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

我已经研究了如何完成我想要的，并找到了一些有用的教程，包括 Ryan Bates 修订的第 88 集关于动态下拉菜单的内容。为了实现我的目标，我选择使用 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()

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

Answer 1

改变这个：

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

到这里：

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