我一直试图让一些动态选择功能正常工作,但尽管有许多不同的教程,我还没有让它工作。为了便于阅读,我将代码示例归结为基础知识。任何建议将不胜感激。
在故障页面上,我需要指定公司并联系故障,但我只希望能够看到与所选公司关联的联系人
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>
答案 0 :(得分:20)
疑难杂症。使用UJS,您可以通过5个步骤动态填充您的选择。
所以,
添加班级名称:
<%= f.label :company, "Company:" %>
<%= collection_select(:fault,:company_id,@companies,:id,:name, {:prompt => "Please select a company"}, {:class => "company_selection"}) %>
<%= f.label :contact, "Contact:" %>
<%= f.collection_select :contact_id, @contacts, :id, :name, {:prompt => "Select a Contact"}, {:class=>"contact_selection"} %>
投入一些CoffeeScript(app/assets/javascripts/faults.js.coffee
)
$(document).ready ->
$(".company_selection").on "change", ->
$.ajax
url: "/faults/get_contacts"
type: "GET"
dataType: "script"
data:
company_id: $('.company_selection option:selected').val()
更新您的故障控制器
def get_contacts
@company = Company.find params[:company_id]
@contacts = @company.contacts
end
为新方法添加路线
resources :faults do
collection do
get 'get_contacts', to: "faults#get_contacts"
end
end
添加UJS文件(app/views/faults/get_contacts.js.erb
)
$('.contact_selection').empty();
$('.contact_selection').append( $('<option>Select the Contact</option>'));
<% @contacts.each do |contact| %>
$('.contact_selection').append($('<option value="<%= contact.id %>"><%= contact.name %></option>'));
<% end %>
答案 1 :(得分:0)
这只能通过香草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);
})
})
});