Question

在我的Rails 4应用中，我有以下表单（与我的Post模型相关）：

<div class="field">
  <%= f.label :format, "FORMAT" %>
  <%= f.select :format, ['A', 'B', 'C', 'D'] %>
</div>

其中呈现以下HTML代码：

<div class="field">
  <label for="post_format">FORMAT</label>
  <select name="post[format]" id="post_format">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</div>

现在，我需要在页面上<div id="post_format_analysis"></div>内显示特定消息并实时显示（无页面重新加载），具体取决于用户选择的选项。

所以，我在我的posts.coffee文件中尝试了这个：

$(document).ready ->
  post_format = document.getElementById("post_format")
  if post_format.options[post_format.selectedIndex].value == 'A'
    $('#post_format_analysis').html 'GREAT'
  else if post_format.options[post_format.selectedIndex].value == 'B'
    $('#post_format_analysis').html 'GOOD'
  else if post_format.options[post_format.selectedIndex].value == 'C'
    $('#post_format_analysis').html 'OK'
  else if post_format.options[post_format.selectedIndex].value == 'D'
    $('#post_format_analysis').html 'BAD'

问题是，这仅在第一次加载页面时起作用，即：与默认选择的值（ A ）对应的消息（ GREAT ）是显示。

但是，当用户选择其他值时，消息不会更新。

我认为问题是我使用$(document).ready ->初始化代码，而我还应该在#post_format div的值发生更改时对其进行初始化，但我不确定如何制作这项工作。

有什么想法吗？

Answer 1

代码的问题在于它没有观察到选择字段值的变化。您可以通过将整个代码放在change事件绑定回调中来实现此目的。我还建议进行一次小型重构，这样你的代码看起来会更清晰。

$(document).ready ->
  $('#post_format')
    .on 'change', ->
      grades = { 'A': 'GREAT', 'B': 'GOOD', 'C': 'OK', 'D': 'BAD' }
      $('#post_format_analysis').html grades[@value]

    .trigger('change')

Rails 4：基于select字段值的coffeescript条件显示

1 个答案: