根据对同一表单中前一个字段的输入更新 Rails 表单中的集合字段

Question

我是第一个项目的爱好者。在一个表单中，管理员可以在一个集合选择中选择多个事件。我希望这些事件可作为数组字段复选框集合中的选项以相同的形式进一步向下使用。

首先，组织者选择活动：

<%= f.input :events, collection: @organizer.events.order(:start_time).reverse, label_method: :event_name_and_date, input_html: {multiple: true, id: "event_select"} %>

然后，此复选框集合字段（以及表单中的其他类似字段）应使用先前选择的事件作为选项动态更新，因此已选中事件的 id 将在 param 数组中发送。

<%= f.input :events_to_include_in_event_pass_1, :collection => ["(previously selected events", "etc"], :as => :check_boxes, include_hidden: false, :input_html => {:multiple => true, id: "event_pass_select"} %>

我有一个 ajax：

$('#event_select').on('change', function(){
  var grab_events = $('#event_select').val();
  var hpeData = '{"hpe": "' + grab_events + '"}';
  $.ajax({
    type: 'post',
    url:'/events/get_the_e',
    dataType:'json',
    contentType:'application/json',
    data: hpeData,
    success:function (data) {
      ... $("document.forms["eventForm"]["events_to_include_in_event_pass_1"].collection_value(?)").update_with('data.hpe.each.event_name_... and_id_somehow_gets_added')
    }
  });
}

这会带回在第一个集合字段中选择的实例，但我不知道如何使用这些实例动态更改 #event_pass_select 集合。 ……这甚至可能吗？还是有一些更好的通用方法来设置这样的东西？

Answer 1

不需要 ajax 调用 - 从浏览器获取数据，将其发送回服务器，然后更新浏览器。

一点 jQuery 就可以解决问题。通读选定的选项并使用它们来填充所需的输入。像这样的...

$('#event_select').on('change', function(){
  $("#event_pass_select").empty();
  $("#event_select option:selected").each(function() {
    var val = $(this).val();
    var text = $(this).html();
    $("#event_pass_select").append( $("<option>")
      .val(val)
      .html(text)
    );
  });
});

将“#event_pass_select”更改为表单上适当的控件 ID。

Answer 2

我没有意识到 input_html 实际上正在工作，它只是将 id 应用于每个复选框，而不是整个输入。我通过在 ctrl c 中单击“编辑为 html”来解决这个问题。我还看到了构成每个复选框的所有 html，并认为我会尝试将所有这些都放在那里，而不仅仅是选项，并且它起作用了。这些可能是simpleform的结果？我感谢帮助调试器。

$('#event_select').on('change', function(){
  var asdf = 1;
  $("#event_select option:selected").each(function() {
    var val = $(this).val();
    var text = $(this).html();

    if (asdf === 1) {
        $(".festival_multipass_ticket_1_hpe span").empty(); 
        $(".festival_multipass_ticket_1_hpe").append( $('<span class="checkbox"><label for="festival_multipass_ticket_1_hpe_' + asdf + '"><input class="check_boxes optional" type="checkbox" value="' + val + '" name="festival[multipass_ticket_1_hpe][]">' + text + '</label></span>')
        );
    } else {
        $(".festival_multipass_ticket_1_hpe").append( $('<span class="checkbox"><label for="festival_multipass_ticket_1_hpe_' + asdf + '"><input class="check_boxes optional" type="checkbox" value="' + val + '" name="festival[multipass_ticket_1_hpe][]">' + text + '</label></span>')
        );
    }

  asdf += 1;
});