Question

嘿，我目前正在设计设备注册表单，最终目标是用户可以从美国选择一个州，并且下面的选择标签将填充该州的正确城市。我正在使用这个城市国家的宝石。 https://github.com/loureirorg/city-state

我看了其他类似这样的例子https://forum.upcase.com/t/dependent-country-city-state/7038我的代码在下面

routes.rb

resources :states, only: :new

registrations.new.html.erb

   <div class="field">
        <%= f.select :state, options_for_select(CS.states(:us)), {:prompt => "State"}, {:class => "signup-input-container--input", :id => "state-picker"} %>
   </div>
   <div class="field">
        <%= f.select :city, options_for_select([]),{}, {:class => "signup-input-container--input", :id => "city-picker"} %>
   </div>

main.js

 document.addEventListener("turbolinks:load", function(){
  var state = document.getElementById("state-picker");
  state.addEventListener("change", function() {
    Rails.ajax({
     url: "/states?country=" + "United States" + "&state=" + 
     state.value,
     type: "GET"
    })
  })
});

registrations-controller.erb

 def new
  super
  @cities = CS.get(:us, params[:state])
 end

new.js.erb

    var city = document.getElementById("city-picker");

    while (city.firstChild) city.removeChild(city.firstChild);

    var placeholder = document.createElement("option");
    placeholder.text = "Choose a city";
    placeholder.value = "";
    city.appendChild(placeholder);

   <% @cities.each do |c| %>
     city.options[city.options.length] = new Option('<%= c %>');
   <% end %>

im试图以示例链接显示的方式使其工作。唯一的区别是用户只会从美国和城市中选择州。

Answer 1

根据我们在评论中的讨论，问题似乎在于您请求的城市URL错误。

您在/states/new处有一条路线，但正在向/states发出请求。尝试将您的main.js更新为：

 document.addEventListener("turbolinks:load", function(){
  var state = document.getElementById("state-picker");
  state.addEventListener("change", function() {
    Rails.ajax({
     url: "/states/new?state=" + state.value,
     type: "GET"
    })
  })
});

（我删除了网址中的国家/地区参数，因为您似乎并没有使用它，而是说您只需要在美国使用该参数。）

让我知道您如何处理。

在Rails中使用城市状态的宝石

1 个答案: