javascriptのDOMプログラミングは都市の連動枠を実現します.

2046 ワード

JavaScript dom webフロントエンド javascriptノート

必要です一枚の絵で表す.
分析:

<!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">
<head>
<script type="text/javascript"> 
	
	function showCity(){
		//                 
		var citys = [[],["  ","  ","  ","  "],["  ","  ","  ","  "],["  ","  ","  ","  "]];			
	
		//         
		var provinceNode = document.getElementById("province");
		//         
		var selectIndex =  provinceNode.selectedIndex;
		//       
		var  cityDatas = citys[selectIndex];
		
		//  city  
		var cityNode = document.getElementById("city");
		
		
		//  options   。<span style="font-family: Arial, Helvetica, sans-serif;">   city   option。                  。  </span><span style="font-family: Arial, Helvetica, sans-serif;">    option，                   。</span><span style="font-family: Arial, Helvetica, sans-serif;">
</span>

		cityNode.options.length = 1 ;
		
		
		
		//                option   city 。
		for(var index = 0; index<cityDatas.length ; index++){
			var option = document.createElement("option");//  option 
			option.innerHTML = cityDatas[index];//    option     
			cityNode.appendChild(option);//   cityNode  ，             。
		}
		
		
	
	}
	
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>     </title>
</head>
<body>
	  <select id="province" onchange="showCity()">
    		<option>  </option>
    		<option>  </option>
            <option>  </option>
            <option>  </option>
    	</select>
	  <select id="city"><option>  </option></select>
    
</body>
</html>

JSドラック--無視しやすいいくつかの知識点