別のドロップダウンリストから値を選択すると、ドロップダウンリストに入力されます

Question

私のレールプロジェクトの別のドロップダウンリストの選択に基づいて1つのドロップダウンリストを設定しようとしています。唯一の違いは、両方のドロップダウンリストが1つのモデルから作成されることです。

モデルは市であり、それは、名と状態を持っています。

は都市名であり、州は市が属する州です。 例えば、都市オブジェクトは、次のようになります。私はRails 4: How to update a collection_select based on another collection_select through AJAX? や他のリンクをチェックしましたが、私は市が最初のものと同じモデルからドロップダウンリストを移入する方法を見つけ出すように見えることはできません

id = 1 
name = LOSANGELES 
state = CA 

ドロップダウン

ここに私のコードは次のとおりです。

コントローラ/ city_stats_controller.rb：

def city_stats 
@state = params[:state] 
@cities = City.select(:name).all.where(:state => state) 

respond_to do |format| 
    format.json { render :json => @cities }  
end 
end 

のビュー/ city_stats/city_stats.html.erb：

<div class="row"> 
    <label>State <span>*</span></label> 
    <%= collection_select :city, :state, City.select(:state).uniq.order('state ASC'), :id, :state, {:prompt => 'Select a State'}, {id: 'state', multiple: false} %> 

    <label>City <span>*</span></label> 
    <%= collection_select :city, :name, [], :id, :name, {:prompt => 'Select a City'}, {id: 'name', multiple: false} %> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
$("#state").on('change', function(){ 
    $.ajax({ 
    url: "/admin/city_stats", 
    type: "GET", 
    data: {state: $(this).val()}, 
    success: function(data) { 
     $("#city").children().remove(); 
     // Create options and append to the list 
     var listitems = []; 
     $.each(data,function(key, value) { 
     listitems += '<option value="' + key+ '">' + value + '</option>'; }); 
    $("#city").append(listitems); 
    console.log(listitems); 
    } 
    }) 
    }); 
}); 
</script> 

は、すべてのヘルプははるかに高く評価されます！

Answer 1

あなたのcity_statsメソッドを変更します。このメソッドは、idと名前

def city_stats 
    @state = params[:state] 
    @cities = City.where(:state => state).select(:id, :name) 

    respond_to do |format| 
    format.json { render :json => @cities }  
    end 
end 

が応答でthis.SinceデータなどのAJAX呼び出しであなたの各機能を変更返す必要があり、我々はvalue.id、value.nameを使用しているオブジェクトの配列です。

$.each(data,function(key, value) { 
    listitems += '<option value="' + value.id + '">' + value.name + '</option>';  
});