the functional test case:
the js:
$(function(){
$("select").change(function(){
$(this).parents("fieldset").next().show();
});
$("#reset").click(function(){
$("fieldset:gt(0)").not(":last").hide();
})
});
the relevant HTML:
<form method="get" action="">
<fieldset id="step1">
<legend>step 1</legend>
<label for="select1">changing first select triggers disclosure</label>
<select name="val1" id="select1">
<option value="null">- choose something -</option>
<option value="1">Only one value served by back-end!</option>
</select>
</fieldset>
<fieldset id="step2" class="notyet">
<legend>step 2</legend>
<label for="select2">changing second select also does stuff</label>
<select name="val1" id="select2">
<option value="null">- choose something -</option>
<option value="1">Lorem</option>
<option value="2">Ipsum</option>
</select>
</fieldset>
<fieldset id="step3" class="notyet">
<legend>step 3</legend>
<label for="select3">oh my, I think I got something wrong...</label>
<select name="val1" id="select3">
<option value="null">- choose something -</option>
<option value="1">Lorem</option>
<option value="2">Ipsum</option>
</select>
</fieldset>
<fieldset class="functions">
<input type="submit" id="submit" value="submit" />
<input type="reset" id="reset" value="reset" />
</fieldset>
</form>