First, the form:

<form id="ExampleForm" method="post" action="#">
	<fieldset>
		<legend>Questionnaire</legend>
		<div class="input select">
			<label for="select1">Choose 1 to make the next select list appear.</label>
			<select name="select1" id="select1">
				<option value="">(choose one)</option>
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
			</select>
		</div>
		<div class="hide" id="hide1"><!-- this select box will be hidden at first -->
			<div class="input select">
				<label for="select2">Select "Yes" to make the next option appear.</label>
				<select name="select2" id="select2">
					<option value="">(choose one)</option>
					<option value="1">Yes</option>
					<option value="0">No</option>
					<option value="3">Don&#039;t Know</option>
				</select>
			</div>
		</div>
		<div class="hide" id="hide2"> <!-- this one will also be hidden at first. -->
			<div class="input select">
				<label for="select3">This is the last question.</label>
				<select name="select3" id="select3">
					<option value="">(choose one)</option>
					<option value="0">0</option>
					<option value="1">1</option>
					<option value="2">2 to 5</option>
					<option value="3">6 to 10</option>
					<option value="4">&gt;10</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div class="submit">
		<input type="submit" value="Save Answers" />
	</div>
</form>

Now make sure your “hide” css class is hidden:

.hide
{

	display:none;

}

Now with the wonderful elegance of JQuery, we’ll tell the browser to display the hidden divs based on the user’s selection:

$(document).ready(function(){
	$("#select1").change(function(){

		if ($(this).val() == "1" ) {

			$("#hide1").slideDown("fast"); //Slide Down Effect

		} else {

			$("#hide1").slideUp("fast");	//Slide Up Effect

		}
	});

	$("#select2").change(function(){

		if ($(this).val() == "1" ) {

			$("#hide2").slideDown("fast"); //Slide Down Effect

		} else {

			$("#hide2").slideUp("fast");	//Slide Up Effect

		}
	});
});

Let’s look at what’s happening here. First, we have a form with select boxes with ids “select1″, “select2″ and “select3″. The last two are hidden by enclosing them in a div with our “hide” class. (Incidentally, Blueprint provides a “hide” class for you if you use that framework.)

Next we tell JQuery that as soon as “select1″ is changed, we need to evaluate the new value. In this case, if the new value is “1″, we want to display the div with the id “hide1″ using JQuery’s slideDown effect. We do this with JQuery’s change event.

$("#select1").change(function(){ // when #select1 changes

		if ($(this).val() == "1" ) { // see if the new value is "1"

			$(".hide1").slideDown("fast"); // if it is "1", display the .hide1 div with the slideDown effect

		} else {

			$(".hide1").slideUp("fast");	//otherwise, hide it with the slideUp effect

		}
	});

Once “select2″ is displayed, we can evaluate it to see if we need to display “select3″ which is in a div with a “hide” class and “hide2″ id.

$("#select2").change(function(){ // once select2 is changed

		if ($(this).val() == "1" ) { // see if the new value is "1"

			$(".hide2").slideDown("fast"); // if it is, display the hide2 div using slideDown

		} else {

			$(".hide2").slideUp("fast");	// otherwise hide it using slideUp

		}
	});

Remarkably simple really. Review the working example and code here.

Update (March 15, 2010)

You also could show/hide a single form element by id rather than enclose them in a div. I enclosed them in a div 1.) so I could hide the label and 2.) because in my application where I use this solution, I’m actually hiding a whole group of fields.

Resources

• JQuery change() Event
• JQuery val()
• JQuery slideDown Effect
• JQuery slideUp Effect

Similar Posts:

• Display Form Fields Based on Selection Using JQuery
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?
• Simple Security in CakePHP
• CSS Scaffolding
• New Theme