Second drop-down options based on first drop-down

Question

On a web page, if you select different options on the first drop-down, different options will appear in the second drop-down.

<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>

Here is the jQuery I have so far:

$(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('');
    })

});

What I am trying to do here is
1. Set variable selected to the value of the option selected in the first drop-down
2. Use that value to look through the first letters of the values of all of the second drop-down possibilities to populate what I want to see in the second drop-down

However when I select anything from the first drop-down, all of the options (A1 through B3) appear in the second drop-down. What is wrong?

Answer 1

You could try like this.

First hide all the options and show only matching options using toggleClass()

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

 .show{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 2

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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 3

 $(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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>