1、Area.html:
<html>
<head runat="server">
<title>源码爱好者-三级地市联动菜单演示_CodeFans.net</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+"\r\n"+"length="+countryNodes.childNodes[0].childNodes.length+"\r\n");
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>
2、省市县信息的资源文件（同Area.html在同一目录中） 见附件。
相关推荐
总结来说，JavaScript省市县三级联动的实现涉及到了数据结构设计、事件监听、DOM操作、数据处理等多个JavaScript基础和进阶概念。通过熟练掌握这些知识点，开发者可以构建出更加高效、易用的Web应用。
在这个“js省市县三级联动”项目中，我们可以看到一个简洁的实现方式。开发者通过编写JavaScript代码，实现了动态更新下拉选项的功能。以下是对这个功能的详细解析： 1. **数据结构**：首先，我们需要一个数据结构...
省市区三级联动 , JavaScript 省市区三级联动 json文件,JavaScript 省市区三级联动 json文件
标题中的“纯js省市县三级联动 附带邮编”指的是使用JavaScript实现的这种功能，并且包含了全国所有地区的邮编数据。 首先，我们要理解什么是“三级联动”。在Web开发中，三级联动通常是指三个下拉菜单（或选择框）...
javascript省市县三级联动菜单,很好的例子。
以上就是实现JavaScript省市县三级联动的基本步骤。在实际项目中，可能还需要考虑数据加载的异步处理、多选支持、搜索功能以及错误处理等问题。此外，对于大型项目，通常会采用更先进的前端框架如React、Vue或...
微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)微信小程序-省市县三级联动，带有自定义地区码(源代码+截图)微信小程序-省市县三级联动，带有...
实现JavaScript省市县三级联动的关键技术包括DOM操作、事件监听和Ajax异步请求。首先，我们需要创建HTML结构，包含三个下拉菜单分别对应省、市、县。然后，通过JavaScript获取这些元素并绑定事件监听器。 DOM...
JS省市县三级联动(支持多种浏览器)JS省市县三级联动(支持多种浏览器)JS省市县三级联动(支持多种浏览器)JS省市县三级联动(支持多种浏览器)JS省市县三级联动(支持多种浏览器)JS省市县三级联动(支持多种浏览器)
在这个“省市县三级联动”压缩包中，包含了一个数据库表和JavaScript实现的代码，旨在帮助开发者快速构建能够动态关联省级、市级和县级数据的功能。 数据库表的设计是关键，通常会有一个表格，包含以下字段： 1. `...
省市区三级联动数据
JavaScript ,省市县三级联动菜单
总的来说，"省市县三级联动js"是一种基于JavaScript的前端交互技术，通过DOM操作和事件监听，实现了多级下拉菜单的联动效果，提高了用户填写地址的效率和准确性。在现代Web开发中，这样的功能是提升用户体验的重要...
这个特定的项目，"纯JS写的省市县三级联动菜单"，是一个无需使用AJAX，而是直接连接数据库来实现的功能模块。下面我们将深入探讨这个话题。 首先，我们要理解什么是三级联动菜单。它通常包含三个级别的选项，如在这...