Show list of states depending on user selection
Regarding your question about downloading all options at once versus fetching the state options dynamically using ajax, the answer depends on just how big the state list is, but probably the right answer is to download them all at once.

File Size Considerations

Consider that jquery, which you are already including, is about 30KB minified and compressed.  My guess would be that your state list is small compared with that, so you shouldn't worry about downloading the whole thing at once.  If that assumption is wrong, then ajax might be a reasonable choice.

UX Considerations

Think about the user experience when the entire state list is downloaded.  Making a new a country selection will instantly repopulate the states -- a seamless experience.  If you have to use ajax, there will be a pause between the user's country selection and when the states become available.  This is awkward, and ideally, if you do this, you'd display an ajax spinner (or some other indication that you are waiting for a network response).  This will make your code more complex, and can be difficult to get exactly right.  For example, you'd need to make sure you handle errors gracefully, and show appropriate messages to the user.  If you don't use ajax, you simply avoid all these issues.

So my advice would be to avoid ajax unless you really need it -- eg, your state lists are huge and you know you'll be supporting users with slow connections.