Question

我有一个表单，用户选择一个日期范围调用它

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是要走的路，但我无法确切地知道如何做到这一点。（如果这是正确的方法。）

Answer 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框。

Rails：根据用户选择显示数据库信息

1 个答案:

表格

脚本

控制器

视图