Question

我有一个表单，它从多个源中提取数据，以智能地预填表单中的某些默认值。我还想预先填写一个“visit_price”文本框，当选择“visit_type”下拉列表时，该文本框将是可编辑的。此下拉列表是groups_collection_select，可通过名称搜索字段（根据this和this railscast视频）通过jquery进行调整。

到目前为止，下面是表单视图，模型关联和coffeescript。我还包括了相关的html输出。

修改需要说明的是，我不确定如何获得与下拉列表中选择的客户价格相关的价格。

访问阻止表单视图

<%= form_for(@visit_block) do |f| %>

  <div class="controls controls-row">
    <div class="form-inputs">
      <%= f.text_field :client_name, data: {autocomplete_source: current_user.clients.order(:last_name).map(&:last_name)} %>
    </div>
    <div class="form-inputs">
      <%= f.grouped_collection_select :visit_type, current_user.clients.order(:last_name), :client_prices, :last_name, :visit_type, :visit_type,  include_blank: true %>
      <%= f.text_field :visit_price %>
    </div>
    </div>
  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

模型

class VisitBlock < ActiveRecord::Base
  attr_accessible :visit_price, :visit_type, :client_id

  belongs_to :client

  def client_name
    client.try(:last_name)
  end

  def client_name=(last_name)
    self.client = Client.find_by_last_name(last_name) if last_name.present?
  end

end


class Client < ActiveRecord::Base
  attr_accessible :active, :address_1, :address_2, :city, :email, :first_name, :last_name, :state, :user_id, :zip, :client_prices_attributes
  has_many :client_prices, :dependent => :destroy

end

class ClientPrice < ActiveRecord::Base
  attr_accessible :client_id, :price, :visit_type, :id, :default_price_id, :custom, :_destroy

  belongs_to :client
  belongs_to :default_price


end

Coffeescript（到目前为止）

jQuery ->
  $('#visit_block_client_name').autocomplete
    source: $('#visit_block_client_name').data('autocomplete-source')

  visit_types = $("#visit_block_visit_type").html()
  console.log visit_types
  $("#visit_block_client_name").keyup ->
    client_name = visit_block_client_name.value
    options = $(visit_types).filter("optgroup[label=" + client_name + "]").html()
    console.log options
    if options
      $("#visit_block_visit_type").html options
    else
      $("#visit_block_visit_type").empty()

  $("#ui-id-1").click ->
    client_name = visit_block_client_name.value
    options = $(visit_types).filter("optgroup[label=" + client_name + "]").html()
    console.log options
    if options
      $("#visit_block_visit_type").html options
    else
      $("#visit_block_visit_type").empty()

HTML输出（到目前为止）

              <h1>New visit_block</h1>

<form accept-charset="UTF-8" action="/visit_blocks" class="new_visit_block" id="new_visit_block" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="I4xbbvdswv18TtP4LWoZHo7udmABT0J/nvKEPLFfO5Q=" /></div>

  <div class="controls controls-row">
    <div class="form-inputs">
      <input data-autocomplete-source="[&quot;Client1&quot;,&quot;Client2&quot;,&quot;Client3&quot;]" id="visit_block_client_name" name="visit_block[client_name]" size="30" type="text" />
    </div>
    <div class="form-inputs">
      <select id="visit_block_visit_type" name="visit_block[visit_type]"><option value=""></option>
<optgroup label="Client1">
<option value="morning">morning</option>
<option value="Morning weekday visit">Morning weekday visit</option>
</optgroup>
<optgroup label="Client2">
<option value="evening">evening</option>
<option value="Morning weekday visit">Morning weekday visit</option>
</optgroup>
<optgroup label="Client3">
<option value="afternoon">afternoon</option>
<option value="Morning weekday visit">Morning weekday visit</option>
</optgroup>
</select>
      <input id="visit_block_visit_price" name="visit_block[visit_price]" size="30" type="text" />
    </div>
  </div>
  <div class="form-actions">
    <button name="button" type="submit">submit</button>
  </div>
</form>

Answer 1

你在你的下拉列表中放了一个钩子：

<select id="visit_block_visit_type" onchange="fill_in_price(this)"...>

假设您有一个将访问类型映射到价格的价格函数，请填写：

fill_in_price = ->
  $("#visit_block_visit_price").val(price($(this).val()))

Answer 2

除了Viktor的答案是正确的，我相信让HTML标记不含任何javascript代码要清晰得多。我会遵循这种方法：

$('#visit_block_visit_type').change(function() {
  $("#visit_block_visit_price").val(price($(this).val()));
});

这是完全相同的事情。

选中下拉列表时填写表单文本框

2 个答案: