Ruby on rails JQuery ERB模板未插入HTML

我是JQuery/JS的初学者，正在尝试在Rails 3.1应用程序中实现一个依赖下拉列表。我有以下表格：

<%= debug params %>
<%= form_for([@wall.climbing_centre, @wall]) do |f| %>
  <% if @wall.errors.any? %>
    <div id="error_explanation"> 
      <h2><%= pluralize(@wall.errors.count, "error") %> prohibited this wall from being saved:</h2>

      <ul>
      <% @wall.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>


  <div id="kind" class="field">
    <%= f.label :kind %><br />
    <%= f.select :kind, Wall::Kinds, :input_html => {:rel => "/kinds"} %>
  </div>
  <div class="field">
    <%= f.label :wall_number %><br />
    <%= f.text_field :number%>
  </div>
 <div id="gradelist" class="field">
    <%= f.label :grade  %><br />
    <%= f.select :grade, Wall::BGrades %>
  </div> 

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

下面是JS.ERB模板：

$("#gradelist").html("<%= label :gbabe, 'Grade'%></br><%=select_tag :gbabe, options_for_select(@grades) %>");

墙模型中有以下常量：

FGrades = %w[5 5+ 6A 6A+ 6B 6B+ 6C 6C+ 7A 7A+ 7B 7B+ 8A 8A+ 8B 8B+ 9A 9A+]
BGrades = %w[V0 V0+ V1 V2 V3 V4 V5 V6 V7 V8 V9 V10 V11 V12 V13 V14 15]
Kinds = ['Boulder', 'Leading', 'Top Rope']

更改：种类选择框中的选择，触发JS post请求，并接收以下响应：

$("#wall_grade").html("<label for="gbabe_Grade">Grade</label></br><select id="gbabe" name="gbabe"><option value="5">5</option>
<option value="5+">5+</option>
<option value="6A">6A</option>
etc...
<option value="8B+">8B+</option>
<option value="9A">9A</option>
<option value="9A+">9A+</option></select>");

---

但是，网页中显示的id=gradelist div中的下拉值实际上没有改变。为什么HTML没有更改？

您的选择没有更改，因为您没有对从服务器得到的响应执行任何操作。您需要在$.post调用中指定一个。此外，在返回成绩之前，您需要将成绩转换为html选项列表，可能需要使用选项\u for \u select

嗨，杰夫，谢谢您的帮助。我正在使用选项进行选择。下面是我的js.erb模板：$gradelist.html；。奇怪的是，如果我使用以下代码：$gradelist.htmlballabla；，内部html确实会被bla取代。

FGrades = %w[5 5+ 6A 6A+ 6B 6B+ 6C 6C+ 7A 7A+ 7B 7B+ 8A 8A+ 8B 8B+ 9A 9A+]
BGrades = %w[V0 V0+ V1 V2 V3 V4 V5 V6 V7 V8 V9 V10 V11 V12 V13 V14 15]
Kinds = ['Boulder', 'Leading', 'Top Rope']

$("#wall_grade").html("<label for="gbabe_Grade">Grade</label></br><select id="gbabe" name="gbabe"><option value="5">5</option>
<option value="5+">5+</option>
<option value="6A">6A</option>
etc...
<option value="8B+">8B+</option>
<option value="9A">9A</option>
<option value="9A+">9A+</option></select>");