Second Drop-down Options Based On First Drop-down August 29, 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<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="independent"><optionvalue="A"> A </option><optionvalue="B"> B </option></select><selectid="dependent"><optionvalue="A021"> A1 </option><optionvalue="A22019"> A2 </option><optionvalue="A3541"> A3 </option><optionvalue="B148"> B1 </option><optionvalue="B2"> B2 </option><optionvalue="B397415"> B3 </option></select>CopySolution 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<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="independent"><optionvalue="A"> A </option><optionvalue="B"> B </option></select><selectid="dependent"><optionvalue="A021"> A1 </option><optionvalue="A22019"> A2 </option><optionvalue="A3541"> A3 </option><optionvalue="B148"> B1 </option><optionvalue="B2"> B2 </option><optionvalue="B397415"> B3 </option></select>CopySolution 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<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="independent"><optionvalue="A"> A </option><optionvalue="B"> B </option></select><selectid="dependent"><optionvalue="A021"> A1 </option><optionvalue="A22019"> A2 </option><optionvalue="A3541"> A3 </option><optionvalue="B148"> B1 </option><optionvalue="B2"> B2 </option><optionvalue="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"