javascript - 嵌套表单中每个 link_to_add 的唯一 div id

Question

## NO-AJAX, No filtering
# Since there is no filtering, it lists all the orders.
##
# partial:
<%= f.collection_select(:customer, @customers,
  :customer_id, :customer_name, {:prompt=>'Select a Customer'})
%>
<%= f.collection_select(:order_id, @orders,
  :order_id, :order_name, {:prompt=>'Select an Order'} )
%>

# view:
<%= nested_form_for @service do |f| %>
  <%= f.link_to_add "Add Order", :orders %>
  <%= f.submit "Submit" %>
<% end %>

#controller:
def new
  @service = Service.new
  @service.orders.build
  @customers = Customer.find(:all)
  @orders = Order.find(:all)
end


## Q: BUT I WANT TO DO filtering based on the customer select, with AJAX and update the  div accordingly.  
# partial:
<%= f.collection_select(:customer, @customers,
  :customer_id, :customer_name, {:prompt=>'Select a Customer'})%>
<div id='display'></div>

这是我的问题：对于每个link_to_add，我想创建一个唯一的“显示” div，因为我有一个javascript，它使用该collection_select 的onchange 事件填充该“显示” div。感谢您的帮助！

Answer 1

如果我正确理解您的问题，则每次单击链接时，以下代码都会创建唯一的 div。

HTML：​</p>

<a href="#" id="link_to_add">Link to Add</a>

​&lt;div id="parent_div">
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery :

var divCnt = 1;
$(document).ready(function() {
    $('#link_to_add').click(function(){
        $('#parent_div').html($('#parent_div').html()+'<div id="display_'+divCnt+'">Display div '+divCnt+'</div>');
        divCnt++;
    });
});

希望这可以帮助！​</p>