在选择元素上使用onchange事件，而不会引起上下文的变化

在选择元素上使用onchange事件，而不会引起上下文的变化____20160420

说明

该技巧的目的是说明怎样在选择元素上正确地使用onchange事件来更新页面上的其他元素。该技巧不会上下文的变化。当网页上有一个或多个选择元素，有一个元素上有onchange事件，会更新页面上其他元素的选项。选择元素所必须的所有数据必须包含在网页中。有一点需要注意，会被修正的选择条目需要在触发选择元素之后，在网页阅读顺序中。这会让辅助技术接收到改变，当被修正的元素聚焦时，用户可以获得新的数据。该技术依靠客户端的JS支持。

样例

样例1：

这个例子包含两个选择元素。当第一个元素被选择时，第二个元素的会发生改变；

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    	<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    	<title>动态选择</title> 
	<script type="text/javascript">
 	//<![CDATA[ 
 		// 可能国家的数组，顺序与在国家列表出现的相同；
 		var countryLists = new Array(4) 
 		countryLists["空"] = ["选择一个国家"]; 
 		countryLists["北美"] = ["加拿大", "美国", "墨西哥"]; 
 		countryLists["南美"] = ["巴西", "墨西哥", "奇了", "厄瓜多尔"]; 
 		countryLists["亚洲"] = ["俄国", "中国", "日本"]; 
 		countryLists["欧洲"]= ["英国", "法国", "西班牙", "德国"]; 
 		/* CountryChange()被选择元素的onchange事件调用
 		* param selectObj 被onchange事件激活的选择事件；
 		*/ 
 		function countryChange(selectObj) { // 获得选择项的索引
 			var idx = selectObj.selectedIndex; // 获得选择项的值 
 			var which = selectObj.options[idx].value; // 使用选择项的值重置国家列表
 			cList = countryLists[which]; // 通过已知的id获得国家选择元素
 			var cSelect = document.getElementById("country"); //将国家选择的当前列表移除
 			var len=cSelect.options.length; 
 			while (cSelect.options.length > 0) { 
 				cSelect.remove(0); 
 			} 
 			var newOption; 
 			// 创建新的选项
 			for (var i=0; i<cList.length; i++) { 
 				newOption = document.createElement("option"); 
				newOption.value = cList[i];  // 假设选项字符串和值是相同的 
				 newOption.text=cList[i]; 
 			//添加新的选项
 			try { 
				 cSelect.add(newOption);  // dom浏览器失效，但是IE需要
				；} 
 			catch (e) { 
				 cSelect.appendChild(newOption); 			} } } 
		//]]>
	</script>
</head>
<body>
  <noscript>此网页需要JavaScript可用并启用正常</noscript>
  <h1>动态选择状态</h1>
  <label for="continent">选择洲</label>
  <select id="continent" onchange="countryChange(this);">
    	<option value="empty">选择一个洲</option>
    	<option value="North America">北美</option>
    	<option value="South America">南美</option>
    	<option value="Asia">亚洲</option>
    	<option value="Europe">欧洲</option>
  </select>
  <br/>
  <label for="country">选择一个国家</label>
  <select id="country">
    	<option value="0">选择一个国家</option>
  </select>
</body>
</html>

效果

demo(动态改变状态)

无障碍效果

各读屏、各浏览器的支持效果

测试人：

争渡、IE11：

永德、IE11：

NVDA、IE11：

永德、chrome：

NVDA、chrome：

NVDA、Firefox：

voiceover、chrmoe：

voiceover、Safari：