我有一个简单的怀疑。 我有两个下拉字段,一个用于州,另一个用于城市。我从我的数据库加载这两个,我有两个名称状态和城市的表。此外,当我选择一个州时,城市也会按照我编写的jquery代码进行更改。 这是我将所有状态加载到我的选择标记
的方法<%= jl.select :state_id , State.all.map{|j| [j[:name], j[:id]]}, {class: 'select2'} %>
我想要的是当我无法加载该页面时我不希望我的城市字段为空白。我希望它是一个下拉列表,其中包含与某些特定state_id相对应的城市。 那么我的城市选择标签应该如何看待。 City表包含name,id和state_id。
答案 0 :(得分:4)
将ID添加到州下拉列表
<%= jl.select :state_id , State.all.map{|j| [j[:name], j[:id]]}, {class: 'select2',id:'states_dropdown'} %>
然后您的城市下拉列表应如下所示:
<%= jl.select :city_id , City.where(:state_id=> "specific_id").map{|j| [j[:name], j[:id]]}, {class: 'select2'} %>
并将其添加到您的咖啡脚本文件
中$("#states_dropdown").change ->
$.ajax
url: '/category/childrens'
type: 'GET'
data :
state_id: $(this).val()
success: (data, status, response) ->
#update cities dropdown
error: ->
# Hard error
答案 1 :(得分:2)
你应该在加载时编写代码。
var cities_obj_arr = <%= @cities.to_json %>;
$(document).on('change', "#state_select_box", function(){
var state_id = $(this).val();
var str_option = '';
$.each(cities_obj_arr, function(index, city_obj){
if(state_id == city_obj['city']['state_id']){
str_option = str_option + "<option value='"+city_obj['city']['name']+"'">"+city_obj['city']['name']+"</option>"; /*city_obj['city']['name'] city is object name for cities*/
}
});
$(this).html(str_opotion);
});
请看一下图片,它会有所帮助。