Javascript rails simple_表单中的动态下拉列表

在我的rails应用程序中，我有一个简单的has\u many和归属关系。我正在使用simple_表单，希望根据用户选择的值动态更改下拉选项

模型 表格输入 所以本质上，我需要processor\u bank\u account下拉列表根据用户选择的处理器进行填充。在控制台中，这将只是：ProcessorBankAccount.whereprocessor:processor

---

需要使用JS加载选项，我想我需要使用JSON，但不确定从这里走到哪里

一种方法是使用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>

最后，只需创建一个负责重新填充下拉列表的视图：

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

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

---

我提出了以下解决方案：

1向my processors controller添加一个新方法，以JSON格式呈现第二个动态下拉列表的输入：

def processor_bank_accounts
 render json: @processor.processor_bank_accounts.each do |bap|
 { id: bap.id, name: bap.name }
 end
end

2将此新功能分配给配置/路由中的新路由：

get 'api/bankaccounts', to: 'processors#processor_bank_accounts', as: 'bankaccounts'

3创建一个JS函数，使用第一个下拉列表中选择的处理器id访问路由，并使用JSON数组中的项目填充第二个下拉列表：

// select first dropdown
const processor = document.getElementById("transaction_processor");
// select second dropdown
const bapSelect = document.getElementById("transaction_processor_bank_account");

function update_baps(processor_id) {
 const url = `INSERTWEBURLHERE/api/bankaccounts?id=${processor_id}`;
 fetch(url)
 .then(response => response.json())
 .then((data) => {
  bapSelect.innerHTML = ""; // clear second dropdown
  data.forEach((bap) => { // go through all the BAPs
  const elem = `<option value="${bap.id}">${bap.bank_name}</option>`; // create option elements to insert into the second dropdown, bank_name is the chosen label method in the form
  bapSelect.insertAdjacentHTML("beforeend", elem); // insert options into the dropdown
  });
 });
}

您应该向选择添加一个id，以便从脚本中识别它们

$('select#processor').on('change', function() {
      var processor_id = this.value;
      var processor_bank_account = $('select#processor_bank_account')

      $.ajax({
        type: "GET", 
        url: <%= your_path %> ,
        data: { processor_id: processor_id },
        success: function(data, textStatus, jqXHR){
          processor_bank_account.empty();
          var option = new Option(data.bank_name, data.id, false, false);
          processor_bank_account.append(option);
        },
        error: function(jqXHR, textStatus, errorThrown){...}
      })
 });

get 'api/bankaccounts', to: 'processors#processor_bank_accounts', as: 'bankaccounts'

// select first dropdown
const processor = document.getElementById("transaction_processor");
// select second dropdown
const bapSelect = document.getElementById("transaction_processor_bank_account");

function update_baps(processor_id) {
 const url = `INSERTWEBURLHERE/api/bankaccounts?id=${processor_id}`;
 fetch(url)
 .then(response => response.json())
 .then((data) => {
  bapSelect.innerHTML = ""; // clear second dropdown
  data.forEach((bap) => { // go through all the BAPs
  const elem = `<option value="${bap.id}">${bap.bank_name}</option>`; // create option elements to insert into the second dropdown, bank_name is the chosen label method in the form
  bapSelect.insertAdjacentHTML("beforeend", elem); // insert options into the dropdown
  });
 });
}

processor.addEventListener('change', function () {
 update_baps(parseInt(processor.value));
});

$('select#processor').on('change', function() {
      var processor_id = this.value;
      var processor_bank_account = $('select#processor_bank_account')

      $.ajax({
        type: "GET", 
        url: <%= your_path %> ,
        data: { processor_id: processor_id },
        success: function(data, textStatus, jqXHR){
          processor_bank_account.empty();
          var option = new Option(data.bank_name, data.id, false, false);
          processor_bank_account.append(option);
        },
        error: function(jqXHR, textStatus, errorThrown){...}
      })
 });