轨道 - 通过选择下拉菜单执行 ajax 调用

Question

我有一个包含select标签的视图，它不是表单的一部分，只是一个独立的下拉菜单。单击其中一个选项时，我想执行 ajax 调用

这是选择标签

<%= select_tag 'application_stage', options_for_select(application.job.hiring_procedure.hiring_procedure_stages.map{ |p| [p.name, p.id] }), prompt: "Hiring stage", class: 'input-block-level chzn-select hiring_stage_dropdown', id: 'hiring_stage_dropdown' %>

这是一个基本的jquery，我试图通过它来检测变化

    jQuery(function($) {
        console.log('clicked');
        $("#hiring_stage_dropdown").click(function() {
            var state = $('select#hiring_stage_dropdown :selected').val();
            console.log(state);
        });
    })

但是当我选择其中一个选项时，没有任何反应，我知道 ajax 代码不存在，但我现在想要的只是在选择其中一个选项时在控制台中看到一些东西。

我在这里错过了什么？

这是选择的样子

<select class="input-block-level chzn-select hiring_stage_dropdown" id="hiring_stage_dropdown" name="application_stage">
  <option value="">Hiring stage</option>
  <option value="3">Manager Step 1</option>
  <option value="4">Manager Step 2</option>
</select>

Answer 1

从选择下拉列表中选择项目时执行 AJAX 调用是通过 jquery-ujs 内置到 Rails 中的。

首先，确保 Gemfile 中有gem 'jquery-rails'，//= require jquery_ujs在应用程序.js清单文件中(默认情况下它们都在那里(。

然后将 data-remote 、 data-url 和 data-method 属性添加到您的选择中。 jquery-url 将序列化 select 的值并发出请求。您的select_tag代码可能如下所示：

<%= select_tag(
  'application_stage',
  options_for_select(
    application.job.hiring_procedure.hiring_procedure_stages.map{ |p| [p.name, p.id] }
  ),
  prompt: "Hiring stage",
  class: 'input-block-level chzn-select hiring_stage_dropdown',
  id: 'hiring_stage_dropdown',
  data: {
    remote: true,
    url: '/your_path',
    method: 'get'
  }
) %>

当选择一个值时，jquery-ujs 会向/your_path?application_stage=:selected_value发出GET请求。然后，您可以在 js.erb 响应中处理此问题。

Answer 2

尝试下面的代码，这将起作用： 使用change事件而不是click

//jQuery(function($) {
        $("#hiring_stage_dropdown").on("change",function() {
            var state = $(this).val();
            alert(state);
        });
//    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="hiring_stage_dropdown">
<option value="-1">Select Any Option </option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>