simple_form_for 中的相关下拉列表

Posted 2023-05-09

【中文标题】simple_form_for 中的相关下拉列表

【英文标题】：Dependent dropdowns in simple_form_for

【发布时间】：2016-05-22 05:16:51

【问题描述】：

我有一个带有 2 个下拉菜单的表单：收藏和书籍。第一个下拉列表显示所有集合。除非选择了某个集合，否则第二个下拉列表必须为空。只有当用户选择了一个收藏时，第二个下拉列表才会充满该收藏中的书籍。

我的haml文件：

= simple_form_for 'reader', url: generate_reader_path do |f|
      = f.input :collection, :collection => @collections.map|c| [c[:name], c[:id]], input_html:  url: get_books_collections_path
      %br
      = f.input :book, :collection => @books.map|b| [b[:name], b[:id]]

:javascript

  // generate books based on chosen collection

  $(function() 
    $('select#reader_collection').change(function() 
      var id = $(this).find(":selected").val();
      var params = 'some_id=' + id;
    );
  );

当用户选择一个集合时，他应该进入 collections_controller 中的 get_books 方法：

  def get_books
    collection_id = params[:some_id]
    @books = Book.where(collection_id: collection_id)
  end

请帮助我继续前进

【参考方案1】：

我会使用 http://www.appelsiini.net/projects/chained 之类的东西。

如果你想自己做：

你的get book需要输出json：

def get_books
  collection_id = params[:some_id]
  @books = Book.where(collection_id: collection_id)

  render json: @books
end

javascript：

:javascript

  // generate books based on chosen collection

  $(function() 
    $('select#reader_collection').change(function() 
      var id = $(this).find(":selected").val();
      var params = 'some_id=' + id;


        $.ajax(
          #You could use the url set on the first select, set it to an data attribute and retrieve it here with $(select).data 'url'
          url: "/controller/action?id=" + id, 
          type: 'get',
          data: $(this).serialize()
        ).success(function (data) 
          update_select(data);
        );
    );
  );


function update_select(data) 
    var json = jQuery.parseJSON(data);
    var options = [];
    json.each(function (key, index) 
        options.push(text: index, value: key);
    );
    $("#select_box").replaceOptions(options);
;

【参考方案2】：

您需要从所选集合的服务器获取 Json 数据，然后填充 Book Dropdown。所以这里有一个代码 sn-p 来做到这一点

服务器端

def get_books
    collection_id = params[:some_id]
    @books = Book.where(collection_id: collection_id)
    render :json=> @books.map |book| :id=>book.id,:title=>book.name
end

:javascript

  // generate books based on chosen collection

  $(function() 
    $('select#reader_collection').change(function() 
      var id = $(this).find(":selected").val();
      $.get(("/get_books/?some_id="+id),function(data)
     $.each(data, function( index, book ) 
     $(YOUR_BOOK_DROPDOWN_SELECTOR).append($('<option>').text(book.title).attr('value', book.id))
);
);
        );
      );

将 YOUR_BOOK_DROPDOWN_SELECTOR 替换为您的图书的实际下拉 ID/选择器。

P.S 没有测试自己。可能会有一些问题

【讨论】：

什么都没有发生 :( 我添加了一个书籍下拉类并用它替换了 YOUR_BOOK_DROPDOWN_SELECTOR

你能告诉我浏览器控制台有什么错误吗？其次检查请求在服务器端接收到的Rails日志是否具有有效的集合ID？