Javascript 简单形式的相关下拉列表

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

我的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;
    });
  });

当用户选择一个集合时，他应该进入集合控制器中的get\u books方法：

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

请帮我继续前进

我会用类似的东西

如果你想自己做：

您的get books需要输出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);
};

我会用类似的东西

如果你想自己做：

您的get books需要输出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);
};

---

您需要从所选集合的服务器获取Json数据，然后填充Book下拉列表。这里有一个代码片段可以实现这一点

服务器端

：javascript

用书本的实际下拉ID/选择器替换书本下拉选择器

---

p.S没有测试我自己。可能有一些小故障

您需要从所选集合的服务器获取Json数据，然后填充书籍下拉列表。这里有一个代码片段可以实现这一点

服务器端

：javascript

用书本的实际下拉ID/选择器替换书本下拉选择器

---

p.S没有测试我自己。可能有一些小故障

什么也没有发生：我添加了一个books下拉列表类，并用它替换了您的\u BOOK\u下拉列表\u选择器。您能告诉我浏览器控制台中是否有错误吗？其次，检查服务器端接收到的请求是否具有有效的集合id的Rails日志？什么也没有发生：我添加了一个books下拉列表类，并用它替换了您的\u BOOK\u下拉列表\u选择器。您能告诉我在浏览器控制台中是否有任何错误吗？其次，检查服务器端接收的请求是否具有有效的集合id的Rails日志？