[英]Populate rails form with data based on the previous field select
I have a form with two collection select fields. 我有一个带有两个集合选择字段的表单。
I want to populate the data in the second field depending on what is selected in the first field. 我想根据在第一个字段中选择的内容来填充第二个字段中的数据。
#clientform
= form_for(@booking, html: { class: "form-horizontal", role: "form" }) do |f|
- if @booking.errors.any?
.alert.alert-danger.alert-dismissable role="alert"
button.close type="button" data-dismiss="alert"
span aria-hidden="true"
| ×
span.sr-only
| Close
h4= "#{pluralize(@booking.errors.count,"error")} prohibited this booking from being saved:"
ul
- @booking.errors.full_messages.each do |msg|
li= msg
#selectcourse
.form-group
= f.label :course
= f.collection_select :course_id, Course.order(:title),:id,:title, {prompt: "Choose a course", include_blank: true}, {class: "form-control"}
.form-group
.col-sm-12
.next
= link_to 'Next', '#', remote: true, class: "btn btn-primary"
#selectdate
.form-group
= f.label :date
= f.collection_select :date, dates, :to_s, :to_s, include_blank: false
.form-group
.col-sm-12
.next
= link_to 'Next', '#', remote: true, class: "btn btn-primary"
.form-group.hidden
.col-sm-offset-2.col-sm-10
= f.submit class: "btn btn-primary"
after the first field is selected a user clicks next which triggers an ajax call 选择第一个字段后,用户单击下一步将触发ajax调用
$('.next').click ->
console.log 'next'
$.ajax
url: '/bookings/course_availability'
type: 'POST'
dataType: 'json'
contentType: 'application/json'
data: JSON.stringify({course: $("#booking_course_id").val();})
success: (data) ->
console.log 'success'
return
return
the controller returns a @dates object, an array containing different dates but I don't know how to populate the form with this data... 控制器返回一个@dates对象,一个包含不同日期的数组,但是我不知道如何用此数据填充表单...
First: 第一:
Instead of using a NEXT
button to make the ajax call, you can as well just listen for an on-change
event on the first(Course) select. 除了使用
NEXT
按钮进行ajax调用外,您还可以只在第一个(课程)选择上监听on-change
事件。
Now to answer your question: 现在回答您的问题:
When the ajax call returns the @dates
response, (which you said is an array of different dates), you can now bind these dates array in @dates
response to the value of the options of the second select by iterating on this array, and building <option>...</option>
tags to be appended, according to this SO answer. 当ajax调用返回
@dates
响应(您说是不同日期的数组)时,现在可以通过在此数组上进行迭代,将@dates
响应中的这些date数组绑定到第二个select的选项的值,然后根据此SO答案 ,构建要附加的<option>...</option>
标签。
Alternatively, you can use the JQuery selectable
library, which comes with the JQuery-UI gem for rails, for this functionality as explained in this rails-guide by Andrey Koleshko. 另外,您可以使用
JQuery selectable
库,该库随Rails的JQuery-UI gem一起提供, 如Andrey Koleshko的rails指南中所说明的那样。 . 。
I want to populate the data in the second field depending on what is selected in the first field
我想根据第一个字段中选择的内容填充第二个字段中的数据
Often called dynamic select boxes for future reference. 通常称为动态选择框,以供将来参考。
-- -
If you're receiving the @dates
object back, you'll be able to use the following: 如果您收到
@dates
对象,则可以使用以下内容:
$(document).on "click", ".next", ->
$.ajax
url: '/bookings/course_availability'
type: 'POST'
dataType: 'json'
contentType: 'application/json'
data: JSON.stringify({course: $("#booking_course_id").val();})
success: (data) ->
$dropdown = $("select#date")
$dropdown.empty()
$.each JSON.parse(data), (index, value) ->
$dropdown.append '<option>' + value + '</option>'
Very old-skool; 很老套 you're basically overwriting the second
select
options list. 您基本上是在覆盖第二个
select
选项列表。 This will update in the DOM immediately. 这将立即在DOM中更新。
-- -
Some good refs: 一些不错的参考:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.