JQuery ERB template not inserting HTML

I'm a beginner at JQuery/JS and am trying to implement a dependent drop-down list in a Rails 3.1 app. I have the following form:

<%= 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 %开发者_Go百科></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 %>

The Following JavaScript

jQuery.ajaxSetup({
 'beforeSend': function(xhr) { xhr.setRequestHeader("Accept", "text/javascript") }
});
jQuery(function($) {
  // when the #kind field changes
  $("#kind").change(function() {
    // make a POST call and replace the content
    $.post('/kinds', {id: $("#wall_kind").val()}, null, "script");
    return false;
  });

})

The following JS.ERB template:

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

The following action in my walls controller: def grades_by_kind

  if params[:id].present?

    @grades = (params[:id] == "Boulder" ? Wall::BGrades : Wall::FGrades)

  else
    @grades = []
  end

  respond_to do |format|
    format.js
  end
end

I have the following constants in the wall model:

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']

Changing a selection in the :kind select box, triggers the JS post request, and receives the following response:

$("#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>");

However, the drop down values in the id="gradelist" div presented in the webpage aren't actually changing. Why isn't the HTML being changed?

Your select isn't changing because you're not doing anything with the response you're getting from the server. You need to specify a callback in your $.post call. Also, you need to convert your grades to an html option list before returning them, perhaps with options_for_select