example.html

<div id="container">
	<p class="reveal-container">
		<label for="form-app-school-country">Country</label>
		<select name="app-country" class="progressive-reveal">
			<option value="" selected="selected">Select a Country</option>
			<option value="USA">United States</option>
			<option value="CA">Canada</option>
			<option value="Else">Everything Else</option>
		</select>
	</p>
	<p class="reveal-container">
		<label for="form-app-state">State</label>
		<select name="app-state" class="progressive-reveal progressive-reveal-hidden">
			<option value="" selected="selected">Select a State</option>
			<option value="AL">Alabama</option>
			<option value="SD">South Dakota</option>
			<option value="TN">Tennessee</option>
			<option value="TX">Texas</option>
		</select>
	</p>
	<p class="reveal-container">
		<label for="form-app-city">City</label>
		<select name="app-city" class="progressive-reveal progressive-reveal-hidden">
			<option value="" selected="selected">Select a City</option>
			<option value="Austin">Austin</option>
			<option value="Dallas">Dallas</option>
			<option value="Houston">Houston</option>
		</select>
	</p>
</div>

progressiveRevealChange.js

var App = {};

App.progressiveRevealChange = function(selector, reveal_container, parent_container) {
	$(parent_container+" "+selector+"-hidden").parent().hide();	
	$(parent_container+" "+selector).change(function() {
		$(this).closest(reveal_container)
			.nextAll(':has('+selector+'-hidden):first')
			.find(selector+'-hidden')
			.parent().slideDown("fast");
	});
}

jQuery(document).ready(function($) {
	App.progressiveRevealChange('.progressive-reveal', '.reveal-container', '#container');
});