I am working on an application that utilizes Rails 4.1 and Ruby 2.1.2. The show.html.erb view for the Assignment Model in this application is as follows:

<h1><%= "#{'Source URL'}"%> <div class="source-url"><%= @assignment.source.url %></div></h1>
<%= link_to new_assignment_contact_path(@assignment), id: 'display_modal', class: "add-btn btn-big" do %>
<i class="i15"></i> Add Contact
<% end %>
<br />
<br />
<table>
  <thead>
    <tr>
        <th>Contact Email Address</th>
        <th>Contact Name</th>
        <th>Title</th>
        <th>Phone</th>
  <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <% @contacts.each do |contact| %>
        <tr>
            <td><%= contact.contact_email %></td>
            <td><%= contact.contact_name %></td>
            <td><%= contact.contact_title %></td>
            <td><%= contact.contact_phone_number %></td>
    <td><%= contact.notes %></td>
        </tr>   
    <% end %>
  </tbody>      
</table>
<br />
<%= link_to "Completed", change_status_assignment_path(@assignment, status: "Completed"), method: :patch, class: "action-btn" %>

When the user presses the New Contact button, a modal pops up and displays the following form:

    <%= form_for(@contact, url: assignment_contacts_path(@assignment), remote: true) do |f| %>
    <div class="cols">
  <div class="col">
    <div class="field">
      <%= f.email_field :contact_email, autofocus: true, placeholder: "Contact email" %>
    </div>
    <div class="field">
      <%= f.text_field :contact_name, placeholder: "Contact Name" %>
    </div>
    <div class="field">
      <%= f.text_field :contact_title, placeholder: "Contact Title", class: "ico-doc" %>
    </div>
    <div class="field">
      <%= f.text_field :contact_phone_number, placeholder: "Contact Phone Number", class: "ico-phone" %>
    </div>
  </div>
  <div class="col">
    <div class="field">
      <%= f.text_field :contact_domain, placeholder: "Contact Domain", class: "ico-www" %>
    </div>
    <div class="field">
      <%= f.select :notes,  ["404 Not Found", "Page Not Loading", "Site Error", "Web Page Not Available", "Log In Required", "Privacy Error", "Blank Page",  "Redirect Url Change >>", "Contact Form Only >>", "Irrelevant >>"], { prompt: "Notes" }, { class: "ico-globe" }  %>
    </div>
    <div class = "field">
      <%= f.text_field :redirect_url_change, placeholder: "Enter Redirect URL" %>
    </div>
    <div class = "field">
      <%= f.text_field :contact_form_only, placeholder: "Enter Contact Form URL" %>
    </div>
    <div class = "field">
      <%= f.select :irrelevant, ["Foreign Site", "Lead Gen Site", "Job Listing", "Domain For Sale", "Forum", "FAQ", "Other >>"], { prompt: "Select Reason Irrelevant", style: 'display:none'} %>
    </div>
    <div class = "field">
      <%= f.text_field :other, placeholder: "Enter other reason" %>
    </div>
  </div>
    </div>

    <div class="actions">
        <%= f.submit "Submit", class: "action-btn" %>
    </div>          
<% end %>

The :redirect_url_change, :contact_form_only, :irrelevant, and :other fields on the modal are initially hidden using CSS with the display:none property. However, based on the option selected in the :notes select element, the application needs to dynamically display the corresponding field.

In Rails, one way to achieve this is by using jQuery or Coffeescript. I am unsure how to write the necessary jQuery/Coffeescript code for this functionality. Furthermore, since this form is within a modal, I am uncertain about where exactly to place this jQuery or Coffeescript code. I attempted to add a simple alert in the app/assets/javascript/contacts.js.coffee file, but it did not trigger. Am I placing the code in the wrong location?

If you could provide some sample code that accomplishes this task and advise me on where to place it, I would greatly appreciate it.

EDIT: Thanks to Lanny, I managed to get the following jQuery script working in the browser's javascript console:

$("select[name='contact[notes]']").change(function () {
   if ($(this).val() == "Redirect Url Change >>") {
    $("input[name='contact[redirect_url_change]']").show();
    $("input[name='contact[contact_form_only]']").hide();
    $("select[name='contact[irrelevant]']").hide();
    $("input[name='contact[other]']").hide();
  }
  else if ($(this).val() == "Contact Form Only >>") {
    $("input[name='contact[redirect_url_change]']").hide();
    $("input[name='contact[contact_form_only]']").show();
    $("select[name='contact[irrelevant]']").hide();
    $("input[name='contact[other]']").hide();
  }
  else if ($(this).val() == "Irrelevant >>") {
    $("input[name='contact[redirect_url_change]']").hide();
    $("input[name='contact[contact_form_only]']").hide();
    $("select[name='contact[irrelevant]']").show();
    $("input[name='contact[other]']").hide();
  }
    else {
    $("input[name='contact[redirect_url_change]']").hide();
    $("input[name='contact[contact_form_only]']").hide();
    $("select[name='contact[irrelevant]']").hide();
    $("input[name='contact[other]']").hide();
  }
 })

$("select[name='contact[irrelevant]']").change(function () {
  if ($(this).val() == "Other >>") {
    $("textarea[name='contact[other]']").show();
  }
  else {
    $("textarea[name='contact[other]']").hide();
  }
})  

When I open the dialog modal, paste the script into the console, and press Run, it works perfectly. However, it does not run in the actual application. I have tried placing it in both the application.js and contact.js files, but neither option has worked. At this point, since the code functions correctly in the console, I suspect that something needs to be done to load the code into the browser or there may be an interference issue. Currently, Turbolinks is being used in the application, but I do not believe it is necessary.

If someone could assist me with determining where the code should be placed and how to call it, or help troubleshoot any potential interferences, I would greatly appreciate it.

Thank you.