Rails -动态选择-集合选择

Question

我一直在尝试一些动态选择功能，但尽管有许多不同的教程，我还没有让它工作。为了便于阅读，我将代码示例简化为基础知识。任何建议都将不胜感激。

在故障页面上，我需要为故障分配公司和联系人，但我只希望能够看到与所选公司关联的联系人

Fault - belongs_to :company, :user, :contact
User - has_many :faults
Contacts - has_and_belongs_to_many :companies
Company - has_and_belongs_to_many :contacts, has_many :faults

/faults/_form.html.erb

<%= f.label :company, "Company:" %>

<%= collection_select(:fault,:company_id,@companies,:id,:full_name, :prompt => "Please select a company") %></br>

<%= f.label :contact, "Contact:" %>

<%= f.collection_select :contact_id, @contacts, :id, :name, :prompt => "Select a Contact" %>

<%= link_to "Add New Contact", {:controller => "companies", :action => "index"}, :confirm => "To add a contact for a company you need to do this from the companies page." %></br>

Answer 1

抓住你了。使用UJS，您可以在5个步骤中动态填充您的选择。

1. 将类名添加到视图中的选择中
2. Add JavaScript (或CoffeeScript)查看选择元素的更改
3. 创建控制器方法以获取所需的信息根据您的选择
4. 添加与新控制器方法匹配的路由

<代码>H19创建一个UJS视图以更新您的联系人选择<代码>H210<代码>G211

所以,

1. 添加类名：

<%= f.label :company，"Company:“%> <%= collection_select( :contact，:company_id，@companies，:id，:name，{:prompt =>”请选择公司“}，{:class => "company_selection"}) %> <%= f.label :Contact，"Contact:”%> <%= f.collection_select :contact_id，@contacts，:id，:name，{:prompt =>“选择联系人”}，{:class=>"contact_selection"} %>

• 抛出一些CoffeeScript (app/assets/javascripts/faults.js.coffee)

$(.ready) -> $(".company_selection").on“更改”，获取联系人url：“/ -> / $.ajax _dataType”类型："GET“dataType："script”data: company_id：$('.company_selection option:selected').val()

• Update your faults controller

def get_contacts @company = Company.find params:company_id @contacts = @company.contacts end

• 将路由添加到新方法

资源:错误做收集做get 'get_contacts'，to："faults#get_contacts“end end

• 添加UJS文件(app/views/faults/get_contacts.js.erb)

$('.contact_selection').empty()；$('.contact_selection').append( $(‘选择联系人’))；<% @contacts.each do |contact| %> $('.contact_selection').append($('<%= contact.name %>'))；<% end %>

Answer 2

Vanilla JS选项

这只能用普通的javascript来实现。确保companies/[id]/contacts.json上有一条返回正确数据的路由。

const select = document.querySelector('#company_id');
select.addEventListener('change',function(e) {
  axios.get(`/companies/${e.target.value}/contacts.json`)
    .then((res) => {
      let contactSelect = document.querySelector('#contact_id')
      contactSelect.innerHTML = ''
      res.data.map((model, i) => {
        contactSelect.options[i] = new Option(model.name, model.id);
      })
    })
});