title: Drop-down box dependent on the option selected in another drop-down box
body: <p>I have 2 different SELECT OPTION in a form.</p>
  
  <p>The first one is Source, the second one is Status. I would like to have different OPTIONS in my Status drop-down list depending on the OPTION selected in my Source drop-down.</p>
  
  <p>Source:</p>
  
  <pre><code>&lt;select id="source" name="source"&gt;
       &lt;option&gt;MANUAL&lt;/option&gt;
       &lt;option&gt;ONLINE&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Status:</p>
  
  <pre><code>&lt;select id="status" name="status"&gt;
  
  &lt;/select&gt;
  </code></pre>
  
  <p>Options:
  - If Source is MANUAL, then Status is OPEN or DELIVERED
  - If Source is ONLINE, then Status is OPEN or DELIVERED or SHIPPED</p>
  
  <p>My non-working attempt:</p>
  
  <pre><code>            &lt;script&gt;
              $(document).ready(function () {
              var option = document.getElementById("status").options;
              if (document.getElementById('source').value == "MANUAL") {
                  $("#status").append('&lt;option&gt;OPEN&lt;/option&gt;');
                  $("#status").append('&lt;option&gt;DELIVERED&lt;/option&gt;');
                  }
              if (document.getElementById('source').value == "ONLINE") {
                  $("#status").append('&lt;option&gt;OPEN&lt;/option&gt;');
                  $("#status").append('&lt;option&gt;DELIVERED&lt;/option&gt;');
                  $("#status").append('&lt;option&gt;SHIPPED&lt;/option&gt;');
                  }
              });
              &lt;/script&gt;
  </code></pre>