使用基于前一个字段选择的数据填充rails表单 [英] Populate rails form with data based on the previous field select

问题描述

我想在第二个字段中填充数据，具体取决于第一个字段中选择的内容。

p>

  #clientform 
 = form_for（@booking，html：{class：form-horizo​​ntal，role：form }）do | f | 
  -  if @ booking.errors.any？ 
 .alert.alert-danger.alert-dismissable role =alert
 button.close type =buttondata-dismiss =alert
 span aria-hidden =true 
 | &安培;倍; 
 span.sr-only 
 |关闭
 h4 =＃{pluralize（@ booking.errors.count，error）}禁止保存此预订：
 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，{提示符：选择课程，include_blank：true}，{class：form-control} 
 $ b $ .form-group 
。 col-sm-12 
 .next 
 = link_to'Next'，'＃'，remote：true，class：btn btn-primary
 #selectdate 
 .form- group 
 = f.label：date 
 = f.collection_select：日期，日期，：to_s，：to_s，include_blank：false 
 $ b $ .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
  

选择第一个字段后，用户点击下一个触发ajax调用的用户

  $（ '下一个'）。13 C舔 - > 
 console.log'next'
 $ .ajax 
 url：'/ bookings / course_availability'
类型：'POST'
 dataType：'json'
 contentType：'application / json'
 data：JSON.stringify（{course：$（＃booking_course_id）。val（）;}）
 success：（data） - > 
 console.log'success'
 
 
返回
返回
  

控制器返回一个@dates对象，一个包含不同日期的数组，但我不知道如何用这些数据填充表单...

我想在第二个字段中填充数据，

通常称为动态选择框以供将来参考。

-

如果您收到 @dates 对象返回，您可以使用以下内容：

  $（document）.onclick， .next， - > 
 $ .ajax 
 url：'/ bookings / course_availability'
类型：'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>'
  

很老的skool;你基本上覆盖了第二个选择选项列表。这将在DOM中立即更新。

-

一些好的参考：

• Railscasts动态选择菜单


• Rails 4 Dynamic 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

$('.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...

解决方案

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:

$(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. This will update in the DOM immediately.

--

Some good refs:

• Railscasts Dynamic Select menus
• Rails 4 Dynamic Select menus

这篇关于使用基于前一个字段选择的数据填充rails表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！