Rails，Jquery:依赖下拉列表错误:未捕获类型错误:undefined不是一个函数

Question

我正在尝试使用 collection_select 和 Jquery 实现 3 个依赖下拉列表。我有一个名为 Categories 的模型，它有 3 个字段：main、sub 和 sub sub 。我有另一个属于类别的模型product。产品类别has_many。

创建产品时，我需要选择它所属的类别。为此，首先用户选择 main ，然后从那里过滤sub字段列表，以仅包含与main字段是所选main category_ids对应的字段。然后对sub_sub进行相同的过滤。

我从尝试实现sub过滤开始。这是我的代码。

products_controller.rb ：

  def get_dropdown_options
    val = params[:main]
    Category.where(main: val).uniq.pluck(:sub)
  end

form的相关部分：

<%= f.fields_for @category do |builder| %>
  <div class="field">
    <%= builder.label 'Category' %><br>
    <%= builder.collection_select :main, Category.get_uniq_fields(:main), "to_s", "to_s",  {:include_blank => 'Main'}, remote: true %>
  </div>
  <div class="field">
    <%= builder.label 'Sub Category' %><br>
    <%= builder.collection_select :sub, [], "to_s", "to_s", {:include_blank => 'Sub'}, remote: true%>
  </div>
  <div class="field">
    <%= builder.label 'Sub Sub Category' %><br>
    <%= builder.collection_select :sub_sub, [], :sub_sub, "to_s", {:include_blank => 'Sub Sub'} %>
  </div>
<% end %>

和JavaScript：

$(document).ready(function() {
  $("select#product_category_main").change(function(){
    var url = '/products/new/get_dropdown_options?main=' + $(this).val();
    $.get(url, function(data) {
      $('select#product_category_sub').addOption(data, false);
    });
  });
});

当我选择一个main时，我不断收到错误：Uncaught TypeError: undefined is not a function来自javascript中的$('select#product_category_sub').addOption(data, false);行。

我是 Rails 的 javascript 新手，因此真的很难弄清楚出了什么问题。有人可以帮忙吗？提前谢谢。

编辑 0：我使用的 JS 来自这个答案：Rails 依赖于表单中的collection_select字段。

编辑 1：如何使用控制器中 get_dropdown_options 方法的结果作为第二个collection_select的选项？

编辑2：我已将方法更改为：

def get_dropdown_options
   val = params[:main]
   options = Category.where(main: val).collect { |x| "'#{x.id}' : '#{x.sub}'"}
   render text: "{#{options.join(",")}}"
end 

基本上输出一个类似 JSON 的对象，并将 JavaScript 输出到：

$(document).ready(function() {
  $("select#product_category_main").change(function(){
    var url = '/products/new/get_dropdown_options?main=' + $(this).val();
    $.get(url, function(data) {
      $.each(url, function(key, value) {   
         $('#selectproduct_category_sub')
        .append($('<option>', { value : key })
        .text(value)); 
      });
    });
  });
});

但仍在努力了解如何添加get_dropdown_options方法输出的选项。

任何人都可以帮忙吗？

Answer 1

这里有几个步骤需要使这一切正常工作。

首先，您希望让控制器为选项呈现 JSON。像这样：

def get_dropdown_options
   val = params[:main]
   render json: Category.where(main: val)
end

接下来，您必须在用户更改选择值时发出 AJAX 请求，然后处理响应（实际上应该是一个类别列表，其中每个类别都已呈现为普通的旧 Javascript 对象）。

$(document).ready(function() {
  $("select#product_category_main").change(function(){
    var url = '/products/new/get_dropdown_options?main=' + $(this).val();
    $.getJSON(url, function(data) {
      $.each(data, function(index, category) {   
         $('#selectproduct_category_sub')
        .append($('<option>', { value : category.id })
        .text(category.sub)); 
      });
    });
  });
});

对getJSON的调用向服务器中的控制器方法发出请求，接收响应并将其从其文本JSON表示形式转换为javascript对象。然后它调用您的函数，将该对象作为data传递。您的函数遍历对象（对象数组），从每个对象中提取相关字段并构建选项。