title: Rails - dynamically change options in forms
body: <p>I currently have a form that creates <code>clinicians</code>.  On this form I would like to have a dropdown for <code>clinician_type</code>where a user can select between <code>physician</code>, <code>nurse</code>, and <code>other</code>.  Depending on the user's selection the form would adapt to either allow them to select a <code>Speciality</code> for a <code>physician</code> or an <code>Occupation</code> for a <code>nurse</code>.</p>
  
  <p>I tried to implement the answer to <a href="https://stackoverflow.com/questions/23459948/how-do-i-create-a-auto-adaptive-form">23459948</a> and adapt it to having three options but I don't know javascript and I can't get it to work.</p>
  
  <p><code>Clinician</code> <code>belongs_to</code> <code>:occupation</code> and <code>:speciality</code> and <code>Occupation</code> and <code>Speciality</code> each <code>has_many</code> <code>:clinicians</code>.</p>
  
  <p>My code to implement this in the form looks like this:</p>
  
  <pre><code>    &lt;%= form_for @clinician do |form| %&gt;
        Type of new clinician: &lt;select id="clinician_type"&gt;
            &lt;option value="physician"&gt;Physician&lt;/option&gt;
            &lt;option value="nurse"&gt;Nurse&lt;/option&gt;
            &lt;option value="other"&gt;Other&lt;/option&gt;
        &lt;/select&gt;&lt;br /&gt;
  
        &lt;span id="webname"&gt;
          &lt;div class="form-group"&gt;
            &lt;%= form.label :speciality_id %&gt;
            &lt;%= form.collection_select :speciality_id, Speciality.all, :id, :name, { include_blank: true }, class: "form-control" %&gt;
          &lt;/div&gt;
        &lt;/span&gt;
  
        &lt;script&gt;
          document.getElementById("clinician_type").onchange = function () {
              if (document.getElementById("clinician_type").options[document.getElementById("clinician_type").selectedIndex].value == "physician")
                  document.getElementById("webname").style.display = "block";
              else
                  document.getElementById("webname").style.display = "none";
          }
        &lt;/script&gt;
  
        &lt;span id="webname2"&gt;
          &lt;div class="form-group"&gt;
            &lt;%= form.label :occupation_id %&gt;
            &lt;%= form.collection_select :occupation_id, Occupation.all, :id, :name, { include_blank: true }, class: "form-control" %&gt;
          &lt;/div&gt;
        &lt;/span&gt;
  
        &lt;script&gt;
          document.getElementById("clinician_type").onchange = function () {
              if (document.getElementById("clinician_type").options[document.getElementById("clinician_type").selectedIndex].value == "nurse")
                  document.getElementById("webname2").style.display = "block";
              else
                  document.getElementById("webname2").style.display = "none";
          }
        &lt;/script&gt;
  </code></pre>
  
  <p>Followed by many more options that are the same for both <code>physicians</code> and <code>nurses</code>.</p>
  
  <p>Currently <code>Speciality</code> shows up for all options and <code>Occupation</code> appears only when <code>nurse</code> is selected (as it is supposed to).</p>
  
  <p>I would really appreciate any advise for making a form that adapts depending on a dropdown selection.  I've tried implementing the answer to <a href="https://stackoverflow.com/questions/17525724/rails-dynamically-changing-form-content">17525724</a> but haven't gotten it to work either.</p>