Question

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

模型城市，并且名称和州。

名称是城市名称，州是城市所属的州。例如，城市对象将是：

id = 1
name = LOSANGELES
state = CA

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

这是我的代码：

controllers / 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>';    
});

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

1 个答案: