我想根据第一个选择选项中选择的内容填充第二个选择选项。我知道如何使用传统的jquery和html。但是想知道我是否还能更新 options_for_select 。
正如您所看到的,我在第一个选项中有一个帮助函数 city_for_select 。我也希望对第二种方法使用相同的方法。我将不胜感激任何帮助。比你。
<div class="col-md-4">
<%= f.label t('city'), class: "form-control-label" %><br>
<%= f.select :city, options_for_select(city_for_select), {}, class: "form-control", id: "city" %>
</div>
<div class="col-md-4">
<%= f.label t('area'), class: "form-control-label" %><br>
<%= f.select :area, options_for_select(["Plz select"]), {}, class: "form-control", id: "area" %>
</div>
答案 0 :(得分:1)
您必须将第二个options_for_select
提取到控制器方法中。然后使用一些JS在第一次选择更改时调用所述方法。使用jQuery替换/设置第二个options_for_select
的HTML。
就像你说的那样。与传统HTML / jQuery的原理相同,但HTML将来自rails controller
控制器:
def update_select
# Your query here
# Populate @t
end
查看(update_select.js.erb):
$("#sencond_select").html("<%= j render partial: 'update_select' %>");
部分(_update_select.html.erb):
<div class="col-md-4">
<%= label_tag t('area'), nil, class: "form-control-label" %><br>
<%= select_tag :area, options_for_select(["Plz select"]), class: "form-control", id: "area" %>
</div>
答案 1 :(得分:1)
这是另一种做事方式。添加控制器功能和相关路由后,我使用jquery和json调用该函数并加载select选项。这里不需要渲染部分内容。
控制器:请注意,您必须以json格式返回数据。
def area_for_city
city = params[:city]
if city == "city1"
@areas = ["area1", "area2"]
elsif city == "city2"
@areas = ["area3", "area4"]
elsif city == "city3"
@areas == ["area5", "area6"]
end
render json: {areas: @areas}
end
使用Javascript:
function populate_area(city_name){
$.get("/get_area_for_city", {city: city_name}, function(data){
var $area = $('#area');
$area.empty();
for (var i = 0; i < data.areas.length; i++) {
$area.append('<option value=' + data.areas[i] + '>' + data.areas[i] + '</option>');
}
}, "json");
}
$(document).ready(function () {
$("#city").change(function () {
var val = $(this).val();
if (val == "city1") {
populate_area("city1");
} else if (val == "city2") {
populate_area("city2");
} else if (val == "city3") {
populate_area("city3");
}
});
});
问题中已经提供了HTML。