Skip to content

Instantly share code, notes, and snippets.

@stevecj

stevecj/fieldset-alternatives.html

Created July 15, 2011 05:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stevecj/1084120 to your computer and use it in GitHub Desktop.
Save stevecj/1084120 to your computer and use it in GitHub Desktop.
Download ZIP
Spike of JS for forms with nested select-driven alternative fieldsets
Raw
fieldset-alternatives.html
<!DOCTYPE html>
<html>
<head>
<style>
fieldset { display: block; }
.alternative { display:none; }
.alternative-selected { }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready( function () {
// Handles nested alternatives just fine.
$('[data-alternatives]').change( function() {
var group = $(this).attr('data-alternatives') + ':';
var item = group + $(this).val();
var toHide =
$('[data-alternative^="' + group + '"]:not([data-alternative="' + item + '"])');
var toShow =
$('[data-alternative="' + item + '"]');
toHide.removeClass('alternative-selected').addClass('alternative');
toShow.removeClass('alternative').addClass('alternative-selected');
});
});
</script>
</head>
<body>
<form>
<select data-alternatives='root'>
<option value=''>(select option)</option>
<option value='abc'>Abc</option>
<option value='def'>Def</option>
</select>
<fieldset class='alternative' data-alternative='root:abc'>
<h2>Abc</h2>
</fieldset>
<fieldset class='alternative' data-alternative='root:def'>
<h2>Def</h2>
<select data-alternatives='def-sub1'>
<option value=''>(select option)</option>
<option value='mno'>Mno</option>
<option value='pqr'>Pqr</option>
</select>
<fieldset class='alternative' data-alternative='def-sub1:mno'>
<h2>Mno</h2>
</fieldset>
<fieldset class='alternative' data-alternative='def-sub1:pqr'>
<h2>Pqr</h2>
</fieldset>
</fieldset>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment