JavaScript XML省市县三级联动下拉菜单_JavaScript

我介绍一个xml+js实现的省市县三级联动下拉菜单效果，大家可参考。

js代码

复制代码代码如下：

<html>
<head runat="server">
<title>省市县三级联动菜单</title>
<script language="javascript" type="text/javascript">
//首先需要初始化
var xmlDoc;
var nodeIndex;
function getxmlDoc()
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
var currNode;
xmlDoc.async=false;
xmlDoc.load("Area.xml");
if(xmlDoc.parseError.errorCode!=0)
{
var myErr=xmlDoc.parseError;
alert("出错！"+myErr.reason);
}
}
function Init()
{
//打开xlmdocm文档
getxmlDoc();
var dropElement1=document.getElementById("Select1");
var dropElement2=document.getElementById("Select2");
var dropElement3=document.getElementById("Select3");
RemoveDropDownList(dropElement1);
RemoveDropDownList(dropElement2);
RemoveDropDownList(dropElement3);
var TopnodeList=xmlDoc.selectSingleNode("address").childNodes;
if(TopnodeList.length>0)
{
//省份列表
var country;
var province;
var city;
for(var i=0; i<TopnodeList.length; i++)
{
//添加列表项目
country=TopnodeList[i];
var eOption=document.createElement("option");
eOption.value=country.getAttribute("name");
eOption.text=country.getAttribute("name");
dropElement1.add(eOption);
}
if(TopnodeList[0].childNodes.length>0)
{
//城市列表
for(var i=0;i<TopnodeList[0].childNodes.length;i++)
{
var id=dropElement1.options[0].value;
//默认为第一个省份的城市
province=TopnodeList[0];
var eOption=document.createElement("option");
eOption.value=province.childNodes[i].getAttribute("name");
eOption.text=province.childNodes[i].getAttribute("name");
dropElement2.add(eOption);
}
if(TopnodeList[0].childNodes[0].childNodes.length>0)
{
//县列表
for(var i=0;i<TopnodeList[0].childNodes[0].childNodes.length;i++)
{
var id=dropElement2.options[0].value;
//默认为第一个城市的第一个县列表
city=TopnodeList[0].childNodes[0];
var eOption=document.createElement("option");
eOption.value=city.childNodes[i].getAttribute("name");
eOption.text=city.childNodes[i].getAttribute("name");
this.document.getElementById("Select3").add(eOption);
}
}
}
}
}
function selectCity()
{ var dropElement1=document.getElementById("Select1");
var name=dropElement1.options[dropElement1.selectedIndex].value;
//alert(id);
var countryNodes=xmlDoc.selectSingleNode('//address/province [@name="'+name+'"]');
//alert(countryNodes.childNodes.length);
var province=document.getElementById("Select2");
var city=document.getElementById("Select3");
RemoveDropDownList(province);
RemoveDropDownList(city);
if(countryNodes.childNodes.length>0)
{
//填充城市
for(var i=0; i<countryNodes.childNodes.length; i++)
{
var provinceNode=countryNodes.childNodes[i];
var eOption=document.createElement("option");
eOption.value=provinceNode.getAttribute("name");
eOption.text=provinceNode.getAttribute("name");
province.add(eOption);
}
if(countryNodes.childNodes[0].childNodes.length>0)
{
//填充选择省份的第一个城市的县列表
for(var i=0;i<countryNodes.childNodes[0].childNodes.length;i++)
{
//alert("i="+i+"rn"+"length="+countryNodes.childNodes[0].childNodes.length+"rn");
var dropElement2=document.getElementById("Select2");
var dropElement3=document.getElementById("Select3");
//取当天省份下第一个城市列表
var cityNode=countryNodes.childNodes[0];
//alert(cityNode.childNodes.length);
var eOption=document.createElement("option");
eOption.value=cityNode.childNodes[i].getAttribute("name");
eOption.text=cityNode.childNodes[i].getAttribute("name");
dropElement3.add(eOption);
}
}
}
}
function selectCountry()
{
var dropElement2=document.getElementById("Select2");
var name=dropElement2.options[dropElement2.selectedIndex].value;
var provinceNode=xmlDoc.selectSingleNode('//address/province/city[@name="'+name+'"]');
var city=document.getElementById("Select3");
RemoveDropDownList(city);
for(var i=0; i<provinceNode.childNodes.length; i++)
{
var cityNode=provinceNode.childNodes[i];
var eOption=document.createElement("option");
eOption.value=cityNode.getAttribute("name");
eOption.text=cityNode.getAttribute("name");
city.add(eOption);
}
}
function RemoveDropDownList(obj)
{
if(obj)
{
var len=obj.options.length;
if(len>0)
{
//alert(len);
for(var i=len;i>=0;i--)
{
obj.remove(i);
}
}
}
}
</script>
</head>
<body onload="Init();">
<form id="form1" runat="server">
<div>
<select id="Select1" name="Select1" runat="server" onchange="selectCity();">
<option value="" selected="true">省/直辖市</option>
</select>
<select id="Select2" name="Select2" runat="server" onchange="selectCountry()">
<option value="" selected="true">请选择</option>
</select>
<select id="Select3" name="Select3" runat="server" >
<option value="" selected="true">请选择</option>
</select>
</div>
</form>
</body>
</html>

xml文件

复制代码代码如下：

<?xml version="1.0" encoding="gb2312" ?>
<address>
<province name="北京市">
<city name="北京辖区">
<country name="东城区" />
<country name="西城区" />
<country name="崇文区" />
<country name="宣武区" />
<country name="朝阳区" />
<country name="丰台区" />
<country name="石景山区" />
<country name="海淀区" />
<country name="门头沟区" />
<country name="房山区" />
<country name="通州区" />
<country name="顺义区" />
<country name="昌平区" />
<country name="大兴区" />
<country name="怀柔区" />
<country name="平谷区" />
</city>
<city name="北京辖县">
<country name="密云县" />
<country name="延庆县" />
</city>
</province>
<province name="天津市">
<city name="天津辖区">
<country name="和平区" />
<country name="河东区" />
<country name="河西区" />
<country name="南开区" />
<country name="河北区" />
<country name="红桥区" />
<country name="塘沽区" />
<country name="汉沽区" />
<country name="大港区" />
<country name="东丽区" />
<country name="西青区" />
<country name="津南区" />
<country name="北辰区" />
<country name="武清区" />
<country name="宝坻区" />
</city>
<province name="台湾省" />
<province name="香港特区" />
<province name="澳门特区" />
</address>

搜索

热门标签:

JavaScript XML省市县三级联动下拉菜单