jsとxmlで都市連動を実現します.

6114 ワード
JavaScript html xml XHTML
Jsとxmlで都市連動を実現していますが、現在はie 8でしか運行していません.まだ指摘したいバグがあります.

<script type="text/javascript">
 window.onload = function ()
 {
 	
	//    select  
 	var provences = document.getElementById("prvence");
	
	provences.onchange = function ()
	{
		var provenceName = this.value;
		
		var city = document.getElementById("city");			//  city      
		var citys = city.getElementsByTagName("option");    //        onchange      city       
		var lens = citys.length;
		for(var k=lens-1;k>=0;k--)
		{
			city.removeChild(citys[k]);
		}
		
		
		var xmlDoc = loadXML("cities.xml");            //  xml  ，   xml    
		var provence = xmlDoc.getElementsByTagName("provence");  
		var len = provence.length;         //          
		var cities = new Array();
		for(var i=0;i<len;i++)//xml     
		{
			var provenceElements = provence[i];
			pro = provenceElements.getAttribute("name");
			
			if(provenceName==pro)
			{
				cities = provenceElements.getElementsByTagName("city");

			}
		}
		
		var optionies = new Array();
		for(var j=0;j<cities.length;j++)
		{
			optionies = document.createElement("option");
			optionies.innerText= cities[j].text;
			city.appendChild(optionies);
		}
		
		
	}
 }
 
 
 //  xml  

	var xmlDoc;
	function loadXML(fname) { 
			var xmlDoc; 
		try 
		{ 
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
		} catch (e) 
		{ 
			try { 
				xmlDoc = document.implementation.createDocument("", "", null); 
			} 
			catch (e) 
			{ 
				alert(e.message); 
			} 
		} 
		try
		{ 
			xmlDoc.async = false; 
			xmlDoc.load(fname);  
		} 
		catch (e) { 
		} 
		return xmlDoc; 
		} 

</script>
以下はコード全体です.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js    </title>
<!--                      -->
<script type="text/javascript">
 window.onload = function ()
 {
 	
	//    select  
 	var provences = document.getElementById("prvence");
	
	provences.onchange = function ()
	{
		var provenceName = this.value;
		
		var city = document.getElementById("city");			//  city      
		var citys = city.getElementsByTagName("option");    //        onchange      city       
		var lens = citys.length;
		for(var k=lens-1;k>=0;k--)
		{
			city.removeChild(citys[k]);
		}
		
		
		var xmlDoc = loadXML("cities.xml");            //  xml  ，   xml    
		var provence = xmlDoc.getElementsByTagName("provence");  
		var len = provence.length;         //          
		var cities = new Array();
		for(var i=0;i<len;i++)//xml     
		{
			var provenceElements = provence[i];
			pro = provenceElements.getAttribute("name");
			
			if(provenceName==pro)
			{
				cities = provenceElements.getElementsByTagName("city");

			}
		}
		
		var optionies = new Array();
		for(var j=0;j<cities.length;j++)
		{
			optionies = document.createElement("option");
			optionies.innerText= cities[j].text;
			city.appendChild(optionies);
		}
		
		
	}
 }
 
 
 //  xml  

	var xmlDoc;
	function loadXML(fname) { 
			var xmlDoc; 
		try 
		{ 
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
		} catch (e) 
		{ 
			try { 
				xmlDoc = document.implementation.createDocument("", "", null); 
			} 
			catch (e) 
			{ 
				alert(e.message); 
			} 
		} 
		try
		{ 
			xmlDoc.async = false; 
			xmlDoc.load(fname);  
		} 
		catch (e) { 
		} 
		return xmlDoc; 
		} 

</script>
</head>

<body>

	<select id="prvence">
    	<option>----   ----</option>
    	<option value="   ">   </option>
        <option value="   ">   </option>
        <option value="   ">   </option>
        <option value="   ">   </option>
    </select>
    
    <select id="city">
    	<option>----   ----</option>
    </select>
   
	
</body>
</html>
もう一つのxml文書があります.

<?xml version="1.0" encoding="utf-8"?>
<china>
	<provence name="   ">
		<city>  </city>
		<city>  </city>
		<city>  </city>
		<city>  </city>
	</provence>
	<provence name="   ">
		<city>  </city>
		<city>  </city>
		<city>  </city>
		<city>  </city>
	</provence>
	<provence name="   ">
		<city>  </city>
		<city>  </city>
	</provence>
	<provence name="   ">
		<city>  </city>
		<city>  </city>
		
	</provence>


</china>
JS学習ノート-Extens