如何使一个表单域与另一个域相同？

Question

I have a form that allows a user to edit an employee's history with the company.

I want to make it so when the user changed the "To position" dropdown menu of the first entry it changes the "From position" dropdown menu in the next entry to be equal to it.

 <% f.fields_for :employee_position_histories do |emp_pos_his| %>
    <table class="crud-form">
      <tr>
        <td><%= f.label :from_position_id,  " Start Position: " %></td>
        <td><%= f.collection_select :from_position_id, Position.active, :id, :title, { :prompt => ' Select a Position ' }, { :class => 'clean average' } %></td>
      </tr>
      <tr>  
        <td><%= f.label :to_position_id,  " To Position: " %></td>
        <td><%= f.collection_select :to_position_id, Position.active, :id, :title, { :prompt => ' Select a Position ' }, { :class => 'clean average' } %></td>
      </tr> 
      <tr>
        <td><%= f.label :started_at, "Start Date: "%></td>
        <td><%= f.date_picker :started_at, :class => "clean average" %>
      </tr> 
      <tr>
        <td><%= f.label :ended_at, "End Date: "%></td>
        <td><%= f.date_picker :ended_at, :class => "clean average" %>
      </tr>
      <hr>
    </table> 
<% end %>

I am unsure of the best way to do this. A colleague of mine said to use jscript but I am not sure how to do that either.

Answer 1

You can use jQuery to do this:

var fromBox = $("#from");
fromBox.change(function () {
    $("#to").val(fromBox.val());
});

just replace the "#to" and "#from" with your ID's

jsfiddle: http://jsfiddle.net/hummlas/m87ap/

Answer 2

I'm unfamiliar with ruby syntax so I can't tell what you use for your select ids.
Here's a way to do it without jQuery:

var fromBox = document.getElementById("from");

fromBox.addEventListener('change',function() {
     document.getElementById("to").value = fromBox.value;
}, false);

Jsfiddle: http://jsfiddle.net/h5gew/12/