Show/hide select options with jquery

cascading dropdown, dynamic select

by Elvis Sedić

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css">
<form method="post" id="userForm" action="#" class="uk-form uk-form-horizontal formContainer">
  <div class="uk-form-row rsform-block rsform-block-cars">
    <label class="uk-form-label control-label formControlLabel"  for="cars">Cars</label>
    <div class="uk-form-controls formControls">
      <select name="form[cars][]" id="cars" class="rsform-select-box">
        <option value="-- select brand --">-- select brand --</option>
        <option value="ford">Ford</option
          ><option value="audi">Audi</option>
      </select>			
    </div>
  </div>
  <div class="uk-form-row rsform-block rsform-block-ford">
    <label class="uk-form-label control-label formControlLabel"  for="ford">Model</label>
    <div class="uk-form-controls formControls">
      <select name="form[ford][]" id="ford" class="rsform-select-box">
        <option value="modelFord1">Focus</option>
        <option value="modelFord2">Kia</option>
        <option value="modelFord3">Mustang</option>
      </select>
    </div>
  </div>
  <div class="uk-form-row rsform-block rsform-block-audi">
    <label class="uk-form-label control-label formControlLabel"  for="audi">Model</label>
    <div class="uk-form-controls formControls">
      <select name="form[audi][]" id="audi" class="rsform-select-box">
        <option value="modelAudi1">A4</option>
        <option value="modelAudi2">A5</option>
        <option value="modelAudi3">A6</option>
      </select>			
    </div>
  </div>
</form>

CSS

body {
  padding: 1em;
}

JavaScript

if($('#cars').val() == '-- select brand --') {
  $('.rsform-block-ford, .rsform-block-audi').hide();
}

$('#cars').change(function() {
  if($('#cars').val() == '-- select brand --') {
    $('.rsform-block-ford, .rsform-block-audi').hide();
  }
  if($('#cars').val() == 'ford') {
    $('.rsform-block-audi').hide();
    $('.rsform-block-ford').show();
  }
  if($('#cars').val() == 'audi') {
    $('.rsform-block-audi').show();
    $('.rsform-block-ford').hide();
  }
});