CoffeeScript的选择动态的变化和负载表单字段 [英] CoffeeScript to select form fields dynamically on change and on load

问题描述

我有一个Rails应用程序在那里我想选择基于表单中选择哪个地区的设施名单。到目前为止，我已经实现group_collection_select要做到这一点，以及一个位的CoffeeScript的。

I have a Rails app where I'm trying to select a list of facilities based on what region is selected in a form. So far, I've implemented group_collection_select to do this as well as a bit of CoffeeScript.

这创造了新的记录，并选择区域时的作品。该行为是上市所选择的区域只显示设备。有什么不工作是编辑记录时，选择的设备显示了所有按地区分组，而不是制约设施到选定区域的设施。

It works when creating a new record and selecting a region. The behavior being to only show facilities listed for the selected region. What does not work is when editing a record, selecting the facilities shows all of the facilities grouped by region instead of constraining the facilities to the selected region.

如果我选择另一个区域，然后选择原来的原因，设备的正确列表中显示出来。

If I select another region and then select the original reason, the proper list of facilities show up.

我想了解如何重构的CoffeeScript到编辑记录时，该功能在页面加载发射两者（编辑时）和改变。

I'd like to learn how to refactor the CoffeeScript to where when editing the record the function is fired both on page load (when editing) and on change.

最后，还有当transfer_from_id设为零/空白的用例，我们使用名为transfer_from_other的文本字段。目前，如果我不选择设施，并填写，因为CoffeeScript的的transfer_from_other，装载设施transfer_from_id它会通过在范围内的第一个工厂设置transfer_from_id。我想使这个到如果没有选择基金，transfer_from_id是零，所以我可以用transfer_from_other。

Lastly, there are use cases when the transfer_from_id is set to nil/blank and we use a text field called transfer_from_other. Currently if I do not select a facility and fill in transfer_from_other, because of the CoffeeScript loading the facilities in transfer_from_id it will set the transfer_from_id by the first facility in the scope. I'd like to make this to where if no facility is selected, the transfer_from_id is nil so I can use transfer_from_other.

下面就是我的code是这样的：

Here's what my code looks like:

calls.js.coffee

jQuery ->
  facilities = $('#call_transfer_from_id').html()

  $('#call_region_id').change ->
    region = $('#call_region_id :selected').text()
    options = $(facilities).filter("optgroup[label=#{region}]").html()

    if options
      $('#call_transfer_from_id').html(options)   
    else
      $('#call_transfer_from_id').empty()

region.rb

has_many :facilities

facility.rb

attr_accessible :region_id
belongs_to :region

_form.html.erb节选

      <%= f.label :region %>
      <%= f.collection_select(:region_id, Region.all, :id, :area, {:include_blank => true}, {:class => 'select', required: true}) %>
      <%= f.label :Transfer_From %>
      <%= f.grouped_collection_select :transfer_from_id, Region.order(:area), :active_facilities, :area, :id, :facility_name, {include_blank: true}, class: 'select' %>
      <%= f.label :Transfer_From_Other%>
      <%= f.text_field :transfer_from_other %>

如果我的问题和例子都不清楚，请让我知道，我会很高兴的编辑。

If my question and examples are not clear, please let me know and I'll be happy to edit.

推荐答案

关于更新选择两个页面加载和选择更改，除非我失去了一些东西是不是足够简单地打出来的选择更新部分成自己的功能，那你再调用一次在页面加载，然后在每个选择的变化？

Regarding updating the select on both page load and on selection change, unless I'm missing something isn't it sufficient to simply break out the select update portion into its own function, that you then call once on page load, and then on each selection change?

jQuery ->
  facilities = $('#call_transfer_from_id').html()

  update_facilities = ->
    region = $('#call_region_id :selected').text()
    options = $(facilities).filter("optgroup[label=#{region}]").html()

    if options
      $('#call_transfer_from_id').html(options)   
    else
      $('#call_transfer_from_id').empty()      

  $('#call_region_id').change ->
    update_facilities()

  update_facilities()

关于第二个部分，每次更新 #call_transfer_from_id 选择，你将失去的空白选项。这第二个版本增加了中，选择空白选项，您选择一个区域每次：

Regarding the second part, each time you update the #call_transfer_from_id select, you will lose the blank option. This second version adds in and selects a blank option each time you select a region:

jQuery ->
  facilities = $('#call_transfer_from_id').html()

  update_facilities = ->
    region = $('#call_region_id :selected').text()
    options = $(facilities).filter("optgroup[label=#{region}]").html()

    if options
      # Set the options
      $('#call_transfer_from_id').html(options)
      # Add in a blank option at the top
      $('#call_transfer_from_id').prepend("<option value=''></option>")
      # Ensure that the blank option is selected
      $('#call_transfer_from_id option:first').attr("selected", "selected");
    else
      $('#call_transfer_from_id').empty()      

  $('#call_region_id').change ->
    update_facilities()

  update_facilities()

这篇关于CoffeeScript的选择动态的变化和负载表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！