JSFiddle - React, Tailwind, and code Playground

by SullysRants

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form class="p-3">

  <div class="form-group">
    <label for="SelectDIV">Select Division</label>
    <select class="form-control" id="SelectDIV">
          <option value="">Select...</option>
          <option value="ops">OPS</option>
          <option value="od">OD</option>
          <option value="all">ALL</option>
    </select>
  </div>


  <div class="form-group" id="Division_OPS">
    <label for="OPS">Select User</label>
    <select class="form-control" id="OPS">
      <option>SHOW OPS People</option>
    </select>
  </div>

  <div class="form-group" id="Division_OD">
    <label for="OD">Select User</label>
    <select class="form-control" id="OD">
      <option>SHOW OD People</option>
    </select>
  </div>

  <div class="form-group" id="Division_ALL">
    <label for="ALL">Select User</label>
    <select class="form-control" id="ALL">
      <option>SHOW ALL People</option>
    </select>
  </div>

</form>

CSS

form {
  max-width: 900px;
  display: block;
  margin: 0 auto;
}

JavaScript

$("#SelectDIV").change(function() {
  if ($(this).val() == "ops") {
    $('#Division_OPS').show();
    $('#OPS').attr('required', '');
    $('#OPS').attr('data-error', 'This field is required.');
    $('#Division_OD, #Division_ALL').hide();
    $('#OD, #ALL').removeAttr('required');
    $('#OD, #ALL').removeAttr('data-error');
  } else if ($(this).val() == "od") {
    $('#Division_OD').show();
    $('#OD').attr('required', '');
    $('#OD').attr('data-error', 'This field is required.');
    $('#Division_OPS, #Division_ALL').hide();
    $('#OPS, #ALL').removeAttr('required');
    $('#OPS, #ALL').removeAttr('data-error');
  } else if ($(this).val() == "all") {
    $('#Division_ALL').show();
    $('#ALL').attr('required', '');
    $('#ALL').attr('data-error', 'This field is required.');
    $('#Division_OPS, #Division_OD').hide();
    $('#OPS, #OD').removeAttr('required');
    $('#OPS, #OD').removeAttr('data-error');
  } else {
    $('#Division_OPS, #Division_OD, #Division_ALL').hide();
    $('#OPS, #OD, #ALL').removeAttr('required');
    $('#OPS, #OD, #ALL').removeAttr('data-error');
  }
});
$("#SelectDIV").trigger("change");