Question

我目前的状态是：

视图：

<%= simple_form_for(@supervisor) do |f| %>
              <%= f.error_messages %>
              <%= f.association :employee_department, as: :select %>
              <%= f.input :employee_position_id , collection: @departments, as: :grouped_select, group_method: :employee_positions, prompt: "Select Position" %>

              <%= f.input :employee_id , collection: @positions, as: :grouped_select, group_method: :employees%>
<% end %>

控制器：

def new
    @supervisor = CounselorSupervisor.new
    @departments = EmployeeDepartment.order(:name)
    @positions = EmployeePosition.all
  end

counselor_supervisors.js.coffee

jQuery ->
  $('.counselor_supervisor_employee_id').hide()
  employee = $('#counselor_supervisor_employee_id').html()
  $('#counselor_supervisor_employee_position_id').change ->
    position = $('#counselor_supervisor_employee_position_id :selected').text()
    escaped_position = position.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
    options = $(employee).filter("optgroup[label='#{escaped_position}']").html()
    if options
      $('#counselor_supervisor_employee_id').html(options)
      $('.counselor_supervisor_employee_id').fadeIn()
    else
      $('#counselor_supervisor_employee_id').empty()
      $('.counselor_supervisor_employee_id').hide()

咖啡脚本代码来自此截屏视频Dynamic Select Menus (Revised)，但是让第二个下拉列表显示/隐藏对我来说不是一个好的解决方案，我需要发送一个ajax请求来获取第二个drop的数据列表，我还将添加一个beforeSend“is-loading ..”，在这种情况下如何添加ajax请求？我已经搜索了很多，但我无法达到我想要的，我也试图跟随this question，但它对我不起作用。我的rails版本是3.2.14

Answer 1

我建议采用以下方法（我已在某些项目中使用过）。

在第一个下拉列表中附加“on change”事件侦听器
触发事件时，使用AJAX调用检索正确的数据（本例中为JSON）
在AJAX调用的回调中（重新）用所检索的数据填充第二个下拉列表。

Coffescript：

    $('#counselor_supervisor_employee_position_id').change ->
      $.get('YOUR ROUTE HERE' + position_id + '/RESOURCES.json', (result) ->
      options = []
      $.each result, ->
        options.push($("<option />").val(this.RESOURCE_id).text(this.RESOURCE_NAME))
        event.field.find(SECOND_DROPDOWN_HERE).find('option').remove().end().append(options)
      )

现在你只需要在你的行动中回应JSON

如果答案不清楚，或者我忘了一些细节，请告诉我。

有一个带ajax的第二个下拉列表

1 个答案: