Dependant select example

http://stackoverflow.com/questions/27308527/dependent-dropdown-for-wordpress

by hibbard_eu

HTML

<div class="ccms_form_element cfdiv_custom" id="style_container_div">
    <label for="brand">Make:</label>
    <select class="validate['required']" id="make" name="style" onchange="updatepage();" size="1" title="">
      <option value="-1">
        –Choose a Make-
      </option>
      <option class="Audio" value="Audi">
        Audi
      </option>
      <option class="BMW" value="BMW">
        BMW
      </option>
    </select>
    <div class="clear"></div>
    <div id="error-message-style"></div>
    <div class="BMW" id="style-sub-1" onchange="ChangeDropdowns(this.value)" style="display: none;">
      <label for="brand">Model:</label> <select class="postform" id="cat" name="cat">
        <option value="-1">
          –Choose a Model-
        </option>
        <option class="level-0" value="172">
          1 Series
        </option>
        <option class="level-0" value="173">
          2 Series
        </option>
        <option class="level-0" value="106">
          3 Series
        </option>
      </select>
    </div>
    <div class="Audi" id="style-sub-1" onchange="ChangeDropdowns(this.value)" style="display: none;">
      <label for="brand">Model:</label> <select class="postform" id="cat" name="cat">
        <option value="-1">
          –Choose a Model-
        </option>
        <option class="level-0" value="169">
          A1
        </option>
        <option class="level-0" value="170">
          A3
        </option>
        <option class="level-0" value="171">
          A4
        </option>
      </select>
    </div>
    <div class="clear"></div>
    <div id="error-message-style-sub-1"></div>
  </div>

JavaScript

$("#make").change ( function () {
  var targID  = $(this).val ();
  $("div#style-sub-1").hide ();
  $('.' + targID).show ();
});