我有一个表单，用户选择一个日期范围调用它
Borrow_date
Return_date
并根据此日期范围，某些项目可用。所以我们可以称之为
Bicycles.available_based_on_date(borrow_date, return_date)
问题是我想在表单中动态地执行它。所以用户选择
<%= form.date_field :Borrow_date, min: Date.today%>
<%= form.date_field :Return_date, min: Date.today%>
根据用户选择的内容，我想向他们展示可用的内容。我怎么样？我试过JS，但最终意识到我无法用JS数据进行查询。
我已经阅读过JSON是要走的路，但我无法确切地知道如何做到这一点。 （如果这是正确的方法。）
答案 0 :(得分：1)
以下是使用ajax（使用jQuery）获取数据以填充另一个select框的示例;考虑这是一个基本形式（我改编了一些我已经拥有的代码），你需要根据自己的特定需求进行定制。也就是说，它功能齐全，可以帮助你。
首先，您需要设置表单，此示例仅显示相关代码，以向您展示如何使用ajax：
<form id="my-form" action="/bicycles" method="post">
<select id="borrow-date" class="my-date">
<option value="" selected>-- select date --</option>
<option value="2017-05-17">05-17-2017</option>
<option value="2017-05-18">05-18-2017</option>
<option value="2017-05-19">05-19-2017</option>
</select>
<select id="return-date" class="my-date">
<option value="" selected>-- select date --</option>
<option value="2017-05-17">05-17-2017</option>
<option value="2017-05-18">05-18-2017</option>
<option value="2017-05-19">05-19-2017</option>
</select>
<select id="bikes">
<option value="">-- select bicycle --</option>
</select>
</form>
正如您所看到的，带有select的{{1}}没有选项，这只是一个占位符，可以在您将其返回后设置实际选项（来自id="bikes"调用）。另请注意，两个日期ajax框具有相同的`class =“my-date”，这对于从每个框中获取值非常重要。
接下来，设置一个select（这个例子使用jQuery，但你也是javascript），它将从两个日期script框中获取值并将它们发送给你的控制器。
select上述脚本只使用一次验证（即选择了两个日期），但您可以根据需要添加任意数量。
另请注意脚本如何使用类<script type="text/javascript">
$(document).ready(function() {
$('.my-date').on('change', function() {
var data = {}
$('.my-date').each(function() {
if($(this).val()) {
data[$(this).attr("id")] = $(this).val();
}
});
if(Object.keys(data).length > 1) {
$.ajax({
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
type: "POST",
url: "<%= bikes_path %>",
data: data
});
}
});
});
</script>
迭代每个元素以将值设置为"my-date"变量。 data将有两个值：data和borrow-date（日期return-date框的ID）。
接下来向控制器添加一个acrion（或使用现有的一个）来获取值（可在select中获得，params和:borrow_date）并使用它们查询您的模型:return-date，如下所示：
Bicycle请注意使用def bikes
@bikes = Bicycle.available_based_on_date(params[:borrow_date], params[:return_date])
end
操作，该操作与您bikes电话中指定的路线相同（ajax）。
最后设置您的视图，将您的选项添加到设置为占位符url: "<%= bikes_path %>"）的select中：
id="bikes"此视图必须遵循与var options = "";
<% @bikes.each do |bike| %>
options += "<option value='<%= bike.id %>'><%= bike.name %></option>"
<% end %>
$('#bikes').html(options);
视图相同的命名约定，但使用html而不是js（即html），因为控制器需要响应格式为bikes.js.erb请求。
由于此视图也是ajax，您可以像在任何视图中一样使用ruby，因此我们迭代erb并为每个视图分配@bikes并添加到你的option框。