从另一个下拉列表中选择值时填充下拉列表

Question

我正在尝试根据在我的 rails 项目中选择的另一个下拉列表来填充一个下拉列表。唯一的区别是两个下拉列表都应该从一个模型中填充。

模型是City，它有name和state。

name 是城市名称，state 是城市所属的州。 例如，一个城市对象是：

id = 1
name = LOSANGELES
state = CA

我已经检查过Rails 4: How to update a collection_select based on another collection_select through AJAX? 和其他链接，但我似乎无法弄清楚如何从与第一个下拉列表相同的模型中填充城市下拉列表

这是我的代码：

控制器/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

views/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 和 name

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

像这样在 ajax 调用中更改每个函数。因为响应的数据是我们使用的对象数组 value.id, value.name 。

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