Format Code
Run Code
<!DOCTYPE html> <html> <head> <title>Cascading Dropdowns Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("#dropdown1").change(function(){ var selectedValue = $(this).val(); var options = { "1": ["Option 1.1", "Option 1.2"], "2": ["Option 2.1", "Option 2.2"], "3": ["Option 3.1", "Option 3.2"] }; $("#dropdown2").empty(); $.each(options[selectedValue], function(index, value) { $("#dropdown2").append($("<option></option>").text(value)); }); }); }); </script> </head> <body> <select id="dropdown1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <select id="dropdown2"> <option value="">Select an option</option> </select> </body> </html>
console output