JSFiddle - React, Tailwind, and code Playground

HTML

<label for="fld1">Module</label>
<span class="control"><select id="fld1" name="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="alert">
  <option value="1" data-params='{"mod":"Account"}'>when my balance...</option>
  <option value="2" data-params='{"mod":"User"}'>when my login...</option>
</select></span>

JavaScript

var alertselect, modselect;
 var showAlerts = function (module) {
     var alertoptions = alertselect.find('option');
     alertoptions.hide();
     alertoptions.filter(function () {
         return $(this).data('params').mod === module;
     }).show();
 };
 $(document).ready(function () {
     modselect = $('select[name="mod"]');
     alertselect = $('select[name="alert"]');
     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());
 });