title: Attach or Detach Element based on select option
body: <p>I currently have a form where when a specific option is selected from dropdown 1, then dropdown 2 is revealed-</p>
  
  <p>dropdown 1 -</p>
  
  <pre><code>&lt;?php
    echo '&lt;div class="full-divsn"&gt;&lt;div class="col-md-4 col-sm-4 submit-contract-type"&gt;';
    echo '&lt;div class="sublabels"&gt;Listing Type &lt;/div&gt;&lt;div class="subins"&gt;&lt;select name="contract" id="contracttype" class="form-control" required&gt;';
    $property_contract_type = get_terms('property-contract-type', array(
        'hide_empty' =&gt; 0
    ));
    if (!empty($property_contract_type) &amp;&amp; !is_wp_error($property_contract_type)) {
        foreach ($property_contract_type as $term) {
             $selected = ($property_contract_type_value == $term-&gt;name) ? "selected" : "";
             echo '&lt;option id="' . $term-&gt;slug . '" ' . $selected . '&gt;' . $term-&gt;name . '&lt;/option&gt;';
        }
    } echo "&lt;/select&gt;";
    echo '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  ?&gt;
  </code></pre>
  
  <p>dropdown 2 -</p>
  
  <pre><code>&lt;div class="full-divsn" id="prop-terms"&gt; &lt;div class="col-md-4 col-sm-4"&gt;
  &lt;div class="sublabels"&gt;Terms &lt;/div&gt;
  &lt;div class="subins"&gt;
    &lt;select name="proplength" class="form-control"&gt;
      &lt;option selected&gt;&lt;?php echo $proplen; ?&gt;&lt;/option&gt;
      &lt;option value="Month to Month"&gt;Month to Month&lt;/option&gt;
      &lt;option value="6 Months"&gt;6 Months&lt;/option&gt;
      &lt;option value="1 Year"&gt;1 Year&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jQuery -</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  window.onload = function(){
  $(function() {
    $("#contracttype").change(function() {
      if ($("#for-rent").is(":selected")) {
        $("#prop-terms").show();
      } else {
        $("#prop-terms").hide();
      }
    }).trigger('change');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>It works fine however, hiding the dropdown still allows the information to be saved to the form so I would like to remove the second dropdown from the form/dom when the correct option is dropdown 1 is not selected but I want it to reappear when that option is selected.</p>
  
  <p>I looked into detach but Im not sure how to apply it to my situation.</p>