Rails-通過選擇下拉菜單執行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 gem 'jquery-rails' ，並且//= require jquery_ujs在application.js清單文件中//= require jquery_ujs （默認情況下它們都在其中）。

然后將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>