现在在网上看到的三级联一般都是连接数据库或，用javascript数组做的三级联动，我觉得数据没这个必要，有点杀鸡有牛刀的感觉，修改不方便。javascript数组对一般初学者来说不是那么容易看得懂，而且修改不方便，xml是一个不错的选择一目睹了然，随便增加删除十分方便！
ProvinceCity.xml
<?xml version="1.0" encoding="utf-8"?>
<Root>
<Province Name="北京市" Id="110000">
<City Name="市辖区" Id="110100">
<Area Name="东城区" Id="110101" />
<Area Name="西城区" Id="110102" />
<Area Name="崇文区" Id="110103" />
<Area Name="宣武区" Id="110104" />
<Area Name="朝阳区" Id="110105" />
<Area Name="丰台区" Id="110106" />
<Area Name="石景山区" Id="110107" />
<Area Name="海淀区" Id="110108" />
<Area Name="门头沟区" Id="110109" />
<Area Name="房山区" Id="110111" />
<Area Name="通州区" Id="110112" />
<Area Name="顺义区" Id="110113" />
<Area Name="昌平区" Id="110114" />
<Area Name="大兴区" Id="110115" />
<Area Name="怀柔区" Id="110116" />
<Area Name="平谷区" Id="110117" />
</City>
<City Name="县" Id="110200">
<Area Name="密云县" Id="110228" />
<Area Name="延庆县" Id="110229" />
</City>
</Province>
<Province Name="天津市" Id="120000">
<City Name="市辖区" Id="120100">
<Area Name="和平区" Id="120101" />
<Area Name="河东区" Id="120102" />
<Area Name="河西区" Id="120103" />
<Area Name="南开区" Id="120104" />
<Area Name="河北区" Id="120105" />
<Area Name="红桥区" Id="120106" />
<Area Name="塘沽区" Id="120107" />
<Area Name="汉沽区" Id="120108" />
<Area Name="大港区" Id="120109" />
<Area Name="东丽区" Id="120110" />
<Area Name="西青区" Id="120111" />
<Area Name="津南区" Id="120112" />
<Area Name="北辰区" Id="120113" />
<Area Name="武清区" Id="120114" />
<Area Name="宝坻区" Id="120115" />
</City>
<City Name="县" Id="120200">
<Area Name="宁河县" Id="120221" />
<Area Name="静海县" Id="120223" />
<Area Name="蓟 县" Id="120225" />
</City>
..........
........
........
</Province>
<Root>
<script language="javascript" type="text/javascript">
var xmlDoc;
var nodeIndex;
function getxmlDoc()
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
var currNode;
xmlDoc.async=false;
xmlDoc.load("ProvinceCity.xml");
if(xmlDoc.parseError.errorCode!=0)
{
var myErr=xmlDoc.parseError;
alert("出错！"+myErr.reason);
}
getProvince1();
}
function getProvince1()
{
var nodeList=xmlDoc.selectSingleNode("Root").childNodes;
var dropElement=document.getElementById("Select1");
for(var i=0; i<nodeList.length; i++)
{
var provinceNode=nodeList[i];
var eOption=document.createElement("option");
eOption.value=provinceNode.getAttribute("Id");
eOption.text=provinceNode.getAttribute("Name");
dropElement.add(eOption);
}
}
function selectCity1()
{
var dropElement=document.getElementById("Select1");
var id=dropElement.options[dropElement.selectedIndex].value;
var provinceNode=xmlDoc.selectSingleNode("//Root/Province[@Id="+id+"]");
var city=document.getElementById("Select2");
var area=document.getElementById("Select3");
RemoveDropDownList(city);
RemoveDropDownList(area);
for(var i=0; i<provinceNode.childNodes.length; i++)
{
var cityNode=provinceNode.childNodes[i];
var eOption=document.createElement("option");
eOption.value=cityNode.getAttribute("Id");
eOption.text=cityNode.getAttribute("Name");
city.add(eOption);
}
}
function selectArea1()
{
var dropElement=document.getElementById("Select2");
var id=dropElement.options[dropElement.selectedIndex].value;
var provinceNode=xmlDoc.selectSingleNode("//Root/Province/City[@Id="+id+"]");
var area=document.getElementById("Select3");
RemoveDropDownList(area);
for(var i=0; i<provinceNode.childNodes.length; i++)
{
var cityNode=provinceNode.childNodes[i];
var eOption=document.createElement("option");
eOption.value=cityNode.getAttribute("Id");
eOption.text=cityNode.getAttribute("Name");
area.add(eOption);
}
}
function RemoveDropDownList(obj)
{
var len=obj.options.length;
//alert(len);
for(var i=len;i>=0;i--)
{
obj.remove(i);
}
}
</script>
演示：http://home.goofar.com/lkc311/XmlDropDownlist.htm