This can be done as above, with pure JavaScript; you can also bring a server-side possibility and have the first select onchange get data from a database via AJaX and populate the second select with that.
If you want to do a pure vanilla JavaScript method (ie, no jQuery or MooTools, no library, no framework), you would take that <script> and place it at the bottom of the page, before the closing </body> tag, modify it to what you need as far as what options appear in the selects, download the dynamicoptionlist.js file and place it wherever you are placing your .js files, put <script src="/path/to/js/dynamicoptionlist.js"></script> inside your <head></head> tags, give the <body> tag the onload attribute “initDynamicOptionLists()”, and basically follow the instructions listed on this page.