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

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

模型是城市，它有名称和州

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

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>

非常感谢您的帮助

像这样改变你的城市统计方法。此方法应返回id和名称

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

---

有什么问题？你有什么错误吗？代码的哪一部分不起作用？@krishnar我没有得到任何错误，只是在我从第一个下拉列表中选择某个州后，城市下拉列表没有填充。当州下拉列表值改变时，你是否收到请求？检查我的解决方案。我想这对uI应该起作用。我不确定我是否得到了你的答案。。我认为您混淆了控制器中的操作名称，即city_stats而不是city_state。第一个select的id是state，而第二个select的id是CITY该id是列本身的名称吗？就像第一个集合一样，选择id将是state，第二个集合的id将是name？@GeoSal，无论您何时更改状态，它是否会命中服务器？我的意思是，无论您何时更改状态，都可以在rails c中看到请求吗？你得到了什么样的回应？让我们看看。

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

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