JSFiddle - React, Tailwind, and code Playground

HTML

<label for="fld1">Module</label>
<span class="control"><select id="fld1" name="t-mod">
  <option value="Account" selected>Account</option>
  <option value="User">User</option>
</select></span>

<label for="fld2">Send me an alert</label>
<span class="control"><select id="fld2" name="t-alert">
  <option value="100" data-params='{"module":"Account"}'>when my balance...</option>
  <option value="10" data-params='{"module":"User"}'>when my login...</option>
</select></span>

JavaScript

var alertselect, modselect, orgalerts;
 var showAlerts = function (module) {
     alertselect.empty().append(
     	orgalerts.filter(function () {
         return $(this).data('params').module === module;
     }));
 };
 $(document).ready(function () {
     modselect = $('select[name="t-mod"]');
     alertselect = $('select[name="t-alert"]');
     orgalerts = alertselect.children();
     modselect.on('change', function () {
         var val = $(this).find('option:selected').val();
         showAlerts(val);
         alertselect.prop('selectedIndex', -1).trigger('change');
     });
     showAlerts(modselect.find('option:selected').val());
 });