How To Hide And Show Named Divs According To Enum Value?

I'm trying to hide and show divs based on a enum from a . I know this should be rather simple, but I'm very rusty on my JavaScript (and jQuery). My select form is:

).on('change', function() { var value = this.value; $('#dayInterval').toggle(value == 'DAILY'); $('#weekInterval').toggle(value == 'WEEKLY'); $('#monthInterval').toggle(value == 'MONTHLY'); }).change(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="recurrency">
  <select path="recurrency">
    <option value="-" label="--Please Select" />
    <option value="DAILY">DAILY</option>
    <option value="WEEKLY">WEEKLY</option>
    <option value="MONTHLY">MONTHLY</option>
  </select>
</div>

<div id="dayInterval">DAILY</div>
<div id="weekInterval">WEEKLY</div>
<div id="monthInterval">MONTHLY</div>