simple_form通過AJAX填充選擇收集調用

Question

在我看來，我有一個簡單的形式與兩個選擇列表：

<%= simple_form_for @job, url: jobs_path do |f| %> 
    <%= f.input_field :types, as: :select, collection: @types, id 'types-select' %> 
    <%= f.input_field :subtypes, as: :select, collection: @subtypes %> 
<% end %> 

當用戶從第一個列表中的一個選項，下面的第二個清單應與值填充從數據庫基於上述選擇。

出於這個原因，當用戶選擇從第一個列表中選擇我提出Ajax請求：

$('#types-select').change(function(){ 
    $.ajax({ 
    url: '/subtypes', 
    dataType: 'json', 
    type: 'GET', 
    data: { 
     type_id: this.value 
    }, 
    success: function(data) { 
     console.log(data); 
    } 
    }); 
}); 

控制器看起來是這樣的：

class SubtypesController < ApplicationController 
    respond_to :json 

    def index 
    @subtypes = Type.find(params[:type_id]).subtypes 
    render json: @subtypes 
    end 
end 

在這一點上我該怎麼填第二個選擇從@subtypes？

Answer 1

您可以在success回調中填充第二個下拉列表。確保@subtypes也以正確的json格式返回。

控制器：

def index 
    @subtypes = Type.find(params[:type_id]).subtypes 
    render json: @subtypes.map { |item| { value: item.value } } 
    end 

JS：

$.ajax({ 
    url: '/subtypes', 
    dataType: 'json', 
    type: 'GET', 
    data: { 
     type_id: this.value 
    }, 
    success: function(data) { 
     // Populate second dropdown here 
     var output = ''; 
     $subtypes.empty().append(function() { 
     data.forEach(function(item) { 
      output += "<option>" + item.value + "</option>" 
     }); 
     return ouput; 
     }); 
    } 
    });