Second Drop-down Options Based On First Drop-down May 25, 2023 Post a Comment On a web page, if you select different options on the first drop-down, different options will appear in the second drop-down. Solution 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'); }) });Copy .show{ display:none; }Copy <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>Copy Solution 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'); } } }); }); });Copy .hide { display: none; }Copy <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>Copy Solution 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'); } } }); }); });Copy .hide { display: none; }Copy <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>Copy Share Post a Comment for "Second Drop-down Options Based On First Drop-down"
Post a Comment for "Second Drop-down Options Based On First Drop-down"