simple_form ausgewählte Sammlung von AJAX

Question

bevölkerte

Meine Ansicht nennt Ich habe ein einfaches Formular mit zwei Auswahllisten:

<%= 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 %> 

Wenn ein Benutzer eine Option aus der ersten Liste auswählt, sollte die zweite Liste unten mit Werten gefüllt werden aus der Datenbank basierend auf der obigen Auswahl.

Aus diesem Grund mache ich Ajax-Anforderung, wenn ein Benutzer eine Option aus der ersten Liste auswählt:

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

-Controller wie folgt aussieht:

class SubtypesController < ApplicationController 
    respond_to :json 

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

An diesem Punkt, wie kann ich füllen bis zur zweiten Auswahl mit Optionen von @subtypes?

Answer 1

Sie können das zweite Dropdown-Feld innerhalb von success Rückruf aufrufen. Stellen Sie sicher, dass @subtypes auch im richtigen JSON-Format zurückgegeben wird.

Controller:

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