Second drop-down options based on first drop-down

Answer 1

The following loops through the options. If the option's value doesn't start with the correct first letter, a class is added to hide via css. If it does match, the class is removed. It also selects the first option that matches the correct letter, so a hidden option isn't selected.

$(function() {
    $('#independent').on('change', function (e) {

      var selected = $('#independent').val().toUpperCase();
      var currentDep = $('#dependent').val().charAt(0).toUpperCase();
      var changedSelected = false;

      $('#dependent option').each(function() {

        var opt = $(this);
        var value = opt.val().charAt(0).toUpperCase();

        if (value !== selected) {

          opt.addClass('hide');
          opt.removeAttr('selected');

        } else {

          opt.removeClass('hide');

          if (!changedSelected) {

            opt.attr('selected', 'selected');
            changedSelected = true;

          } else {
            opt.removeAttr('selected');
          }
        }
      });
    });
});

.hide {
  display: none;
}