Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Dependent Selects</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <select id="country"> <option value="">--Country--</option> <option value="IN">India</option> <option value="US">USA</option> </select> <select id="state"> <option value="">--State--</option> </select> <script> var data = { IN: ["Bihar","UP","Delhi"], US: ["CA","NY","TX"] }; $("#country").change(function(){ var list = data[this.value] || []; $("#state").empty().append('<option value="">--State--</option>'); $.each(list, function(_, s){ $("#state").append('<option>'+s+'</option>'); }); }); </script> </body> </html>
Output