Javascript 对于RubyonRails，如何在单击按钮时使输入字段可见，或者在单击按钮时创建相同的字段

我是新手

这是我目前的表格

 <%= f.input :campaign_name , :input_html => {:style=> 'width: 300px'} %>
 <%= f.input :date_range, :input_html => {:style=> 'width: 300px'}%>
 <%= f.label :first_event %>
 <%= f.collection_select :first_event, eventNames, :to_s, :to_s, include_blank: true %>
 <br><br><br>
 <%= f.label :second_event %>
 <%= f.collection_select :second_event, eventNames, :to_s, :to_s, include_blank: true%>

{:style=>'宽度：300px'}%>
{:style=>'宽度：300px'}%>

我想要的是，当用户单击“添加筛选器”时，我希望另一个字段弹出与集合选择相同的eventNames数组。我尝试创建另一个按钮并获取其标记，如果不是“提交”按钮和“添加筛选器”按钮，则呈现另一个表单

但这对于界面和用户体验来说都是非常糟糕的

我希望我的用户能够随时删除第二个事件字段，而无需提交表单

因此，我需要在其中添加另一个按钮，以删除新创建的可见表单

---

如我在评论中所说，我如何才能做到这一点？如果你有一个限制，即用户只能添加一个或固定数量的过滤器，那么你可以通过js显示和隐藏你的收藏。你的表单将有一个隐藏的收藏列表

<%= f.input :campaign_name , :input_html => {:style=> 'width: 300px'} %>
<%= f.input :date_range, :input_html => {:style=> 'width: 300px'}%>
<%= f.label :first_event %>
<%= f.collection_select :first_event, eventNames, :to_s, :to_s, include_blank: true %>
<br><br><br>
<%= f.label :second_event %>
<%= f.collection_select :second_event, eventNames, :to_s, :to_s, include_blank: true%>
<%= f.label :third_event, class: "hidden" %>
<%= f.collection_select :third_event, eventNames, :to_s, :to_s, include_blank: true, class: "hidden"%>

并在用户单击add filter（添加过滤器）时通过js显示，假设它是您可以执行的链接：

= link_to "Add Filter", "#", id: "add-filter"

$(document).on("click","#add-filter", function(e){
  $(".hidden").show();
  e.preventDefault();
});

---

若用户可以添加多个过滤器，那个么您需要通过ajax添加它们。对于ajax，请执行以下步骤：

a为您的操作创建自定义路线：

post "/filter" => "your_controller#add_filter", as: "filter"

<%= link_to "Add Filter", filter_path, id: "add-filter", data: {event_id: "2", url: filter_path}%>

$(document).on("click","#add-filter".function(e){
  var eventId = $(this).data("eventId");
  var url = $(this).data("url");
  $.ajax({
    type: "POST",
    url: url,
    data: {id: eventId}
  });
})

def add_filter
  @event_id = params[:id]
  respond_to do |format|
    format.js
  end
end

b创建添加过滤器的链接：

post "/filter" => "your_controller#add_filter", as: "filter"

<%= link_to "Add Filter", filter_path, id: "add-filter", data: {event_id: "2", url: filter_path}%>

$(document).on("click","#add-filter".function(e){
  var eventId = $(this).data("eventId");
  var url = $(this).data("url");
  $.ajax({
    type: "POST",
    url: url,
    data: {id: eventId}
  });
})

def add_filter
  @event_id = params[:id]
  respond_to do |format|
    format.js
  end
end

d在控制器中创建添加过滤器操作：

post "/filter" => "your_controller#add_filter", as: "filter"

<%= link_to "Add Filter", filter_path, id: "add-filter", data: {event_id: "2", url: filter_path}%>

$(document).on("click","#add-filter".function(e){
  var eventId = $(this).data("eventId");
  var url = $(this).data("url");
  $.ajax({
    type: "POST",
    url: url,
    data: {id: eventId}
  });
})

def add_filter
  @event_id = params[:id]
  respond_to do |format|
    format.js
  end
end

e在app/views/your_controller/add_filter.js.erb文件中创建新集合并通过js追加它

var label = "<%=j label_tag "#{@event_id.humanize}_event" %>" 
var collection = "<%=j collection_select(:resource, "#{@event_id.humanize}_event".to_sym , eventNames, :to_s, :to_s, include_blank: true) %>"

$("#form_id").find("select").last().after(label).after(collection);
$("#add-filter").data("eventId","<%=j @event_id + 1 %>");

var label=“”
var collection=“”
$（“#form_id”）.find（“select”）.last（）.after（标签）。after（集合）；
$（“#添加筛选器”）.data（“eventId”，”）；

---

您必须使用或将@event_id转换为words格式，还必须相应地更改：resource

用户可以添加多个筛选器吗？@Mandeep oh You:），是的，用户将能够选择多个过滤器如果您有一个限制，即用户只能添加一个过滤器，那么您可以简单地通过js显示或隐藏您的选择，但由于用户可以添加多个过滤器，所以如果您使用ajax来it@Mandeep好的，用户将输入第一个，不管发生什么，它无论如何都不接受null，但是如果用户单击add filter，就会向用户显示一个新的输入以选择另一个事件。我不知道js或ajax，从未使用过它们中的任何一个，你能告诉我正确的方向吗？集合或第一个的问题是它们不会被隐藏。只有标签受该类定义的影响@mandeep@railsnewbie必须检查，但它也应该在select上工作。结果我必须给出一个div并在该div中分配类，它成功了，谢谢你，现在我会尝试让它出现。但是，难道一个链接不需要提交吗？@railsnewbie不，我们使用的链接中的URL选项是“#”，而且我们会通过js禁用你的链接正常行为。preventDefault（）