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

Posted 2023-05-09

【中文标题】有第二个带有 ajax 的下拉列表

【英文标题】：having a second drop down list with ajax

【发布时间】：2013-12-24 16:19:47

【问题描述】：

我现在的状态是：

查看：

<%= 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 请求来获取第二个下拉列表的数据和我还将添加一个 beforeSend "is-loading.."，在这种情况下如何添加 ajax 请求？我搜索了很多，但我无法实现我想要的，我也尝试关注this question，但它对我不起作用。我的 Rails 版本是 3.2.14

【参考方案1】：

我会建议以下方法（我已经在一些项目中使用过）。

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

咖啡：

    $('#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

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