时间戳

首页 > 解决方案 > rails simple_form中的动态下拉列表

javascript - rails simple_form中的动态下拉列表

问题描述

我的rails 应用程序中有一个简单的has_many 和belongs_to 关系。我正在使用 simple_form 并希望根据用户选择的值动态更改下拉选项。

楷模

 class Processor < ApplicationRecord
   has_many :processor_bank_accounts
 end

 class ProcessorBankAccount < ApplicationRecord
   belongs_to :processor
 end

表单输入

<%= simple_form_for [@customer, @transaction] do |f| %>
<%= f.error_notification %>

<div class="form-inputs">
  <%= f.input :status, :collection => ["payment request"], include_blank: false %>
  <%= f.input :processor, collection: @processors ,label_method: :name,value_method: :id,label: "Processor" , include_blank: false %>
  <%= f.input :processor_bank_account, collection: @bank_accounts , label_method: :bank_name, value_method: :id, label: "Processor Bank Account" , include_blank: true %>
  <%= f.input :tcurrency, collection: @currencies, include_blank: false, label: 'currency' %>
  <%= f.input :amount, as: :decimal, label: 'amount' %>
</div>

<div class="form-actions text-center">
  <%= f.button :submit, "Add transaction", class: "form-button"%>
</div>
<% end %>

所以本质上，我需要根据用户选择的处理器来填充 processor_bank_account 下拉列表。在控制台中，这只是：ProcessorBankAccount.where（处理器：处理器）。

需要使用 JS 加载选项并认为我需要使用 JSON 但不知道从哪里开始

标签： javascriptruby-on-railsjsonajax

解决方案

一种方法是使用 jQuery 对控制器操作进行 AJAX 调用，然后让 Rails 通过 erb 模板处理其余部分。

因此，在您的页面上，使用表单通过 AJAX 调用操作，例如：

<script>
    $(document).ready(function() {
        $('#processor_id').on('change', function() {
            $.ajax({
                url: '/transactions/get_processor_bank_accounts',
                type: 'GET',
                data: {
                    processor_id: this.value
                },
                dataType: 'script',
                error: function() {
                    alert('An error occurred retrieving bank accounts for the selected processor.');
                }
            });
        });
    });
</script>

注意，#processor_id 是您的下拉控件的 ID。

接下来，在控制器的操作中实例化银行账户：

def get_processor_bank_accounts
  @processor_bank_accounts = ProcessorBankAccount.where(processor_id: params[:processor_id])
end

最后简单地创建一个视图，负责重新填充您的下拉列表：

$select_list = $('#processor_id');
$select_list.empty();

<% @processor_bank_accounts.each do |pba| %>
  $select_list.append($('<option value="<%= pba.id %>"><%= pba.name %></option>'));
<% end %>

推荐阅读