Question

我有一个包含两个集合选择字段的表单。

我想根据第一个字段中选择的内容填充第二个字段中的数据。

$('.next').click ->
    console.log 'next'
    $.ajax
      url: '/bookings/course_availability'
      type: 'POST'
      dataType: 'json'
      contentType: 'application/json'
      data: JSON.stringify({course: $("#booking_course_id").val();})
      success: (data) ->
        console.log 'success'


        return
    return

在选择第一个字段后，用户单击下一个触发ajax调用

$(document).ready(function () {
    $("img").on("click", function (event) {

        $('#img_coordinate').html("X Coordinate: " + (event.pageX - this.offsetLeft) + "<br/> Y Coordinate: " + (event.pageY - this.offsetTop));
    });
});

控制器返回一个@dates对象，一个包含不同日期的数组，但我不知道如何使用这些数据填充表单...

Answer 1

<强>首先

您可以在第一个（课程）选择中监听NEXT事件，而不是使用on-change按钮进行ajax调用。

现在回答你的问题：

当ajax调用返回@dates响应时（您说的是不同日期的数组），您现在可以在@dates响应中将这些日期数组绑定到该选项的值第二个选择迭代此数组，并构建要追加的<option>...</option>标记，according to this SO answer.

或者，您可以使用JQuery-UI gem for rails附带的JQuery selectable库来实现此功能as explained in this rails-guide by Andrey Koleshko.。

Answer 2

我想根据第一个字段中选择的内容填充第二个字段中的数据

通常称为dynamic select boxes以供将来参考。

-

如果您收到@dates对象，则可以使用以下内容：

$(document).on "click", ".next", ->
    $.ajax
      url: '/bookings/course_availability'
      type: 'POST'
      dataType: 'json'
      contentType: 'application/json'
      data: JSON.stringify({course: $("#booking_course_id").val();})
      success: (data) ->
        $dropdown = $("select#date")
        $dropdown.empty()
        $.each JSON.parse(data), (index, value) ->
           $dropdown.append '<option>' + value + '</option>'

很老太了;你基本上覆盖了第二个select选项列表。这将立即在DOM中更新。

-

一些好的参考：

使用基于先前字段选择的数据填充rails表单

2 个答案: