-
Notifications
You must be signed in to change notification settings - Fork 3
/
onchange_select.html
46 lines (45 loc) · 1.35 KB
/
onchange_select.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv=Content-Type content="text/html; charset=macintosh">
<title>Accessible Select onChange?</title>
<script src="./bower_components/jquery/jquery.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<form>
<p>
This form is to test out the keyboard-only accessibility of a select element with an onchange handler that inserts something new into the DOM. All browsers have a way to select something from a select that does not trigger the onchange event. In Chrome, Safari and IE, use the space bar. In Firefox, use the F4 key.
</p>
<label>
Choose One
<select id="dynamo">
<option selected="selected" value="">-----</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</label>
<div id="chosen" style="display:none;">
<label>
Enter your name
<input type="text" name="name" id="name" />
</label>
</div>
</form>
<script>
jQuery(document).ready(function () {
jQuery('#dynamo').on('change', function (e) {
if (jQuery(this).val()) {
jQuery('#chosen').show();
} else {
jQuery('#chosen').hide();
}
});
});
</script>
</body>
</html>