<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>