Rails 3中的动态选择菜单

时间:2011-09-03 06:25:05

标签: ruby-on-rails ruby-on-rails-3 jquery

我一直在阅读有关此内容的大量文章,甚至看过Railscast,但似乎没有什么适合我的情况。

如何使用Ajax请求的结果更新“height”选项?

<%= nested_form_for @estimate do |f| %>

  <%= f.label :date %><br />
  <%= f.text_field :date %><br />
  <%= f.label :job_name %><br />
  <%= f.text_field :job_name %><br />

  <%= f.fields_for :items do |builder| %>
    <%= builder.label :description %><br />
    <%= builder.text_field :description %><br />
    <%= builder.label :material %><br />
    <%= builder.select :material, @letters.map { |l| [l.material, l.material] }, {}, :id => "material_field" %><br />
    <%= builder.label :height %><br />
    <%= builder.select :height, @letters.map { |l| [l.height, l.height] }, {}, :id => "height_field" %><br />
    <%= builder.label :thickness %><br />
    <%= builder.select :thickness, @letters.map { |l| [l.thickness, l.thickness] }, {}, :id => "thickness_field" %><br />

    <%= builder.label :quantity %><br />
    <%= builder.text_field :quantity, :id => "quantity_field" %>
    <%= builder.link_to_remove "Remove this item" %>
  <% end %>

  <%= f.link_to_add "Add a item", :items %>
  <%= f.submit "Add item" %>


<% end %>

<script type="text/javascript">

$("#material_field").change(function() {
    //alert("hello")
    var material = $("#material_field").val();
    $.ajax({
      url: '/estimates/height_options?material=' + material, type: 'get', dataType: 'html',
      processData: false,
      success: function(data) {
        //Not sure what to do here with the returned data
      }
    });    
});

</script>


class EstimatesController < ApplicationController

  def height_options
    @heights = Letter.find_all_by_material(params[:material])
    if @heights.blank?
      render :text => "Record not found"
    else
      render :json => @heights
    end
  end

end

Ajax请求正常工作,它返回一个相应字母的数组。我从哪里开始?我真的很感谢任何人的帮助。

1 个答案:

答案 0 :(得分:1)

在您生成的HTML代码中,您有类似的内容:

<select id="item_height">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="25">25</option>
</select>

您可以通过jQuery方法将其他选项标记插入到您的选择中。我认为类似的东西可以起作用:

$("#item_height").html($("#item_height").html() + "<option value="50">50</option>")

或者更聪明的东西,但这是主意。