Radio buttons and hidden fields
I am trying to create a list that appears when the radio buttons are
clicked, I am having a problem with the way the list appears once the
button is clicked.
Here is the example http://jsfiddle.net/c2webdev/4bpKE/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.none {
display:none;
}
</style>
</head>
<body>
<input type="radio" name='thing' value='valuable' data-id="bank" />Running
Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other
challenges
<input type="radio" name='thing' value='valuable' data-id="bakery" />Baking
<div id="school" class="none">
<label for="name">What was the activity called?</label>
<select id = "myList">
<option value = "1">List item 1</option>
<option value = "2">List item 2</option>
<option value = "3">List item 3</option>
<option value = "4">List item 4</option>
</select>
</div>
<div id="bank" class="none">
<label for="name">What was the activity called?</label>
<select id = "myList">
<option value = "1">Pancake Making</option>
<option value = "2">Egg and spoon race</option>
<option value = "3">Sack race </option>
<option value = "4">Three leg race</option>
</select></div>
<div id="bakery" class="none">
<label for="name">What was the activity called?</label>
<select id = "myList">
<option value = "1">Pancake Making</option>
<option value = "2">Egg and spoon race</option>
<option value = "3">Sack race </option>
<option value = "4">Three leg race</option>
</select></div>
<script>
$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
</script>
</body>
</html>
Please help
No comments:
Post a Comment