Как показать выбранное значение выпадающего списка в текстовое поле с помощью jquery/ajax

Question

<% form_for :credit_card, @cc, :url => '/credit_cards', :method => :post do |f| %> 
    <%= f.hidden_field "job_id", :value => params[:job_type_id] %> 
    <%= f.hidden_field "job_type", :value => "Job Hourly" %> 
    <%= f.hidden_field "lead_id", :value => @job.lead_id %> 
    <center><strong>ADD New Credit Card</strong> </center> 
    <br/> 

    <table align="left"> 
    <tr> 
     <td> <label style="padding-left: 30px;">Type</label></td> 
     <td><%= f.select(:card_type, CreditCard::TYPES, {:prompt => "Select Type", :selected => ""}) %></td> 
    </tr> 
    <tr> 
     <td> <label style="padding-left: 30px;">Number</label></td> 
     <td><%= f.text_field "card_number", "size" => 16, 'maxlength' => 16%></td> 
    </tr> 
    <tr> 
     <td> <label style="padding-left: 30px;">Expiry</label></td> 
     <td> <select id="cc_state" name="credit_card[expiration_month]"> 
      <%= options_for_select([[ "Select Month", "" ]] + CreditCard::MONTHS)%> 
     </select> 
     <select id="cc_state" name="credit_card[expiration_year]"> 
      <%= options_for_select([[ "Select Year", "" ]] + ((Date.today.year - 5)..(Date.today.year + 12)).collect{|x| [x,x]}.reverse)%> 
     </select> 
     </td> 
     </td> 
    </tr> 
    <tr> 
     <td> <label style="padding-left: 30px;">CVV</label></td> 
     <td><%= f.text_field "security_code", "size" => 4, 'maxlength' => 4%></td> 
    </tr> 
    <tr> 
     <td> <label style="padding-left: 30px;">Expiry</label></td> 
     <td> <select id="cc_state" name="credit_card[expiration_year]"> 
      <%= options_for_select([[ "Select Year", "" ]] + ((Date.today.year - 5)..(Date.today.year + 12)).collect{|x| [x,x]}.reverse)%> 
     </select> 
     </td> 
    </tr> 
<tr> 
     <td> <label style="padding-left: 30px;">Location</label></td> 
     <td><%= f.select(:id, @job_extra_stops.collect{|s| ["#{s.city},#{s.zip},#{s.state}", s.id]},:onchange => "display_dropdown(this)",:id => "dropdown_id", :prompt => "Select Location")%> </td> 

    </tr> 
    <tr><td> <label style="padding-left: 30px;">Street</label></td> 
     <td><%= f.text_field "billing_street_address", "size" => 20 %></td></tr> 
    <tr><td> <label style="padding-left: 30px;">City</label></td> 
     <td><%= f.text_field "billing_city", "size" => 20 %></td></tr> 
    <tr><td> <label style="padding-left: 30px;">State</label></td> 
     <td><select id="cc_state" name="credit_card[billing_state]"> 
      <%= options_for_select([[ "Select State", "" ]] + State::NAMES)%> 
     </select></tr> 
    <tr><td> <label style="padding-left: 30px;">Zip</label></td> 
     <td><%= f.text_field :billing_zip, "size" => 12 %></td></tr> 
    <tr> 
     <td colspan="2" align="center"><%= submit_tag 'Save' %></td> 
    </tr> 

Это код в файле вида. В настоящее время атрибуты модели кредитной карты вводятся вручную в форме и затем сохраняются. Но вместо ввода вручную я хочу импортировать те значения атрибутов, которые уже присутствуют в модели job_extra_stop. Когда опция выбрана из раскрывающегося списка, я хочу сопоставить эти значения (от модели job_extra_stop) выпадающего списка к атрибутам модели кредитной карты.

Это означает, что когда я выбираю конкретный вариант, тогда значения состояния, zip, city должны быть уменьшены ниже в текстовом поле и сохраняется в модели credit_card после отправки.

Я использую рельсы 1.2.2 и 1.8.6 рубин

Благодарности

Answer 1

В сценарий записи следующий код

function display() {  

    var val1 = "" 
     var val2 = "" 
     var e = "" 

    e = document.getElementById('display_id') 
    val1 = e.options[e.selectedIndex].textContent 
    val2 = val1.split(',') 


    document.getElementById('street').value = val2[0] 
    document.getElementById('city').value = val2[1] 
    document.getElementById('state').value = val2[2] 
    document.getElementById('zip').value = val2[3] 

    } 

добавить в выберите тег следующий код

<%= select_tag :id1, options_for_select([[ "Select Location", "" ]] + @job_extra_stops.collect{|s| ["#{s.st_name},#{s.city},#{s.state},#{s.zip}", s.st_name]}),:onchange => "display()", :id => 'display_id', :include_blank => 'Please add locations above' %>