conditional dropdown

by sudarpochong

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select class=" form-textbox validate[required]" onChange="change()" name="dropdownmain" id="parentSelect" title="">
  <option selected="selected" value="PLEASE SELECT">PLEASE SELECT</option>
  <option value="1">Accommodation and Food Services</option>
  <option value="2">Administrative / Support / Waste Management / Remediation Services</option>
  <option value="3">Agriculture / Forestry / Fishing / Hunting</option>
  <option value="4">Arts / Entertainment / Recreation</option>
  <option value="5">Automotive</option>
  <option value="6">Construction</option>
  <option value="7">Educational Services</option>
  <option value="8">Finance and Insurance</option>
  <option value="9">Health Care and Social Assistance</option>
  <option value="10">Information</option>
  <option value="11">Manufacturing</option>
  <option value="12">Other</option>
  <option value="13">Other Services</option>
  <option value="14">Professional / Scientific and Technical Services</option>
  <option value="15">Real Estate and Rental and Leasing</option>
  <option value="16">Retail Trade</option>
  <option value="17">Transportation and Warehousing</option>
</select>
<br/>
<select class=' child form-textbox validate[required]' name='1' id='' title=''>
  <option selected='selected' value='-1'>PLEASE SELECT</option>
  <option value='A1'>A1</option>
  <option value='A2'>A2</option>
  <option value='A3'>A3</option>
  <option value='A4'>A4</option>
  <option value='A5'>A5</option>
</select>
<br/>
<select class=' child form-textbox validate[required]' name='2' id='' title=''>
  <option selected='selected' value='-1'>PLEASE SELECT</option>
  <option value='B1'>B1</option>
  <option value='B2'>B2</option>
  <option value='B3'>B3</option>
  <option value='B4'>B4</option>
  <option value='B5'>B5</option>
</select>
<br/>
<br/>

<!--<input type="submit" value="Submit">-->

JavaScript

$(document).ready(function() {
  var $topSelect = $('select[name="dropdownmain"]');
  var $nestedSelects = $('select[name!="dropdownmain"]');
  showApplicableSelect();
  $topSelect.change(showApplicableSelect);

  function showApplicableSelect() {
    $nestedSelects
      .prop("selected", false)
      .val("-1")
      .hide();

    $('select[name="' + $topSelect.val() + '"]').show();
  }
});