javascript - Hide/Show <select> depending on the other <select>

Question

I have two <select> elements. The first one contains countries (e.g. USA, Canada, England, Russia, Poland...) and the second one is hidden, containing cities from only USA and Canada (e.g. New York, Los Angeles, Chicago... OR Ottawa, Vancouver, Surrey...)

If the user selects Canada or USA from the first <select>, the second should show and allow him to select his city.

Is it possible to do? I visited so many websites with Ajax and JQuery Validation forms and didn't find some similar source to make this.

Thank you.

Answer 1

It is really simple.
First of all prepare change event handler http://api.jquery.com/change/
Second, check value of your select val : http://api.jquery.com/val/
Third, display or hide your second select. http://api.jquery.com/hide/ or http://api.jquery.com/show/