the functional test case:

step 1

I have to include a meaningless dummy option to make it possible for the select below to trigger the change handlers...

Choose whatever option, now refresh the page, and suppose you'd still like to have that option selected and move on (you cannot do that right away because of the disclosure approach) - you first have to change it to something else, then back to the desired option.

Ways to reproduce the problematic situation:

  1. Choose whatever option
  2. Refresh the page

or...

  1. Choose whatever option
  2. Go to example.com, then hit the browser's "back" button

You'd have the same situation, if eg. you'd submit the form, let the server send the response, then hit the browsers "back" to correct something

What I'd love to have, would be some custom event which would fire when selecting the already selected option in a HTML select element

step 2
step 3

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>