Em uma página da web, se você selecionar opções diferentes no primeiro menu suspenso, diferentes opções aparecerão no segundo menu suspenso.

<select id="independent">
  <option value="A"> A </option>
  <option value="B"> B </option>
</select>

<select id="dependent">
  <option value="A021">    A1 </option>
  <option value="A22019">  A2 </option>
  <option value="A3541">   A3 </option>
  <option value="B148">    B1 </option>
  <option value="B2">      B2 </option>
  <option value="B397415"> B3 </option>
</select>

Aqui está o jQuery que tenho até agora:

$(function() {

    $('#independent').on('change', function (e) {
        var endingChar = $(this).val().split('').pop();
        var selected = $( '#independent' ).val();
          $('#dependent option[value^='+selected+']').toggle(endingChar == selected);
        $('#dependent').val('');
    })

});

O que estou tentando fazer aqui é
1. Definir variávelselecionado para o valor da opção selecionada no primeiro menu suspenso
2. Use esse valor para examinar asprimeiras letras dos valores de todas as segundas possibilidades suspensas parapreencher o que eu quero ver no segundo menu suspenso

No entanto, quando seleciono qualquer coisa no primeiro menu suspenso, todas as opções (A1 a B3) aparecem no segundo menu suspenso. O que está errado?