選擇下拉菜單時填寫表單文本框

Question

我有一個表單從多個來源提取數據以智能地預先填充表單中的某些默認值。我還想預先填寫一個「visit_price」文本框，當選擇「visit_type」下拉列表時，該文本框可以編輯。此下拉列表是通過jQuery通過名稱搜索字段至今ajdusted（按this和this railscast視頻）

下面是表單視圖，模型協會和CoffeeScript的一個grouped_collection_select。我還包括了相關的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

除了維克多的答案是正確的，我相信它將HTML標記離開任何JavaScript代碼更加清潔。我會遵循這種方法：

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

這是完全相同的事情。