中国省市县三级下拉框联动使用示例

最新推荐文章于 2021-07-24 15:22:59 发布

chuang_chuang

最新推荐文章于 2021-07-24 15:22:59 发布

阅读量452

点赞数

分类专栏： JavaScript web技巧文章标签： JS 省市县三级联动 ViewUI

本文链接：https://blog.csdn.net/chuang_chuang/article/details/83984574

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

web技巧

4 篇文章 0 订阅

订阅专栏

[size=large][color=red]HTML文件：[/color][/size]
========================================================
<html>
<head>
<title>三级联动下拉列表演示页</title>
<meta charset="gb2312">
</head>
<body>
<select id="province"></select>
<select id="city"></select>
<select id="county"></select>
<input id="output" />
</body>
</html>
<script type="text/javascript" src="citys.js"></script>
<script type="text/javascript">
init("province", "city", "county", "output");
</script>
==========================================================

[size=large][color=red]JS文件：[/color][/size]
==========================================================
/*
*读取cities.xml
*生成联动下拉列表
*使用方法：
*在页面内调用init(省下拉列表ID, 市下拉列表ID, 县下拉列表ID, 输出INPUT控件ID);
*/
(function() {
var xml, //xml文件对象
xmlFile = "citys.xml", //xml文件名
argsErr = "传入的参数ID不存在，请检查参数！", //错误提示字符串
isIE, //是否是IE
selectProvince, //省下拉列表对象
selectCity, //市下拉列表对象
selectCounty, //县下拉列表对象
option, //下拉列表选项对象
root, //xml文件根元素
province, //province节点对象数组
city, //city节点对象数组
county, //county节点对象数组
provinceName, //省名数组
cityName, //市名数组
countyName, //县名数组
output, //选择后输入结果文本框
init = function(provinceID, cityID, countyID, outputID) {
loadXML(xmlFile);

root = xml.documentElement;
province = root.getElementsByTagName("province");
//为省市县名申请数组空间
provinceName = new Array();
cityName = new Array();
countyName = new Array();
getOutputArea(outputID);

//从city.xml文件读取内容到内存中
getProvince();
getCity(provinceName[0]);
getCounty(cityName[0]);
//创建省下拉列表
selectProvince = getSelect(provinceID);
//创建省下拉列表选项
selectProvince.createOption(provinceName);
//为下拉列表添加事件响应
selectProvince.onchange = function() {
selectCity.length = null; //清空市选项
cityName = null; //清空市名称数组
cityName = new Array(); //为市名称创建新数组
getCity(selectProvince.value); //根据省名称重新获取市数组
selectCity.createOption(cityName); //重新创建列表

selectCounty.length = null;
countyName = null;
countyName = new Array;
getCounty(selectCity.value);
selectCounty.createOption(countyName);

//将选择内容填入输出结果文本框
output.value = selectProvince.value + selectCity.value + selectCounty.value;
}
//创建市下拉列表
selectCity = getSelect(cityID);
//创建市下拉列表选项
selectCity.createOption(cityName);
selectCity.onchange = function() {
selectCounty.length = null;
countyName = null;
countyName = new Array();
getCounty(selectCity.value);
selectCounty.createOption(countyName);
output.value = selectProvince.value + selectCity.value + selectCounty.value;
}
//创建县下拉列表
selectCounty = getSelect(countyID);
//创建县下拉列表选项
selectCounty.createOption(countyName);
selectCounty.onchange = function() {
output.value = selectProvince.value + selectCity.value + selectCounty.value;
}
},
loadXML = function(fileName) {
if (window.ActiveXObject) //IF IE
{
xml = new ActiveXObject("Microsoft.XMLDOM");
isIE = true;
}
else if(document.implementation.createDocument) //IF !IE
{
xml = document.implementation.createDocument("","",null);
isIE = false;
}
xml.async = false;
xml.load(fileName);
}
//获取并返回省名称数组
getProvince = function() {
for(var i=0;i<province.length;i++) {
var n = province.firstChild;
//FF下换行作为节点处理，因此若nodeType等于1,n取下一节点
n = (n.nodeType==1) ? n : n.nextSibling;
provinceName = isIE ? n.text : n.textContent;
}
},
//根w据参数provinceName（省名称）获取对应省包含的市
getCity = function(name) {
//将参数与省名称数组对比,查找省名称
for(var i=0;i<province.length;i++) {
if(provinceName == name) {
city = province.getElementsByTagName("city");
break;
}
}
//找出当前选择省的所有市名称
for(var i=0;i<city.length;i++) {
var n = city.firstChild;
n = (n.nodeType==1) ? n : n.nextSibling;
cityName = isIE ? n.text : n.textContent;
}
},
//根据参数cityName（市名称）获取对应市包含的县
getCounty = function(name) {
//查找市名称
for(var i=0;i<city.length;i++) {
if(cityName == name) {
county = city.getElementsByTagName("county");
break;
}
}
//找出当前选择市的所有县名称
for(var i=0;i<county.length;i++) {
var n = county;
n = (n.nodeType==1) ? n : n.nextSibling;
countyName = isIE ? n.text : n.textContent;
}
},
//获取参数id值的select对象
getSelect = function(id) {
var select;
//try{}catch(){}用于检查传入的ID是否存在，若不存在则进行错误提示
try{
select = document.getElementById(id);
//创建内容长度为参数数组长度，内容为数组元素的option
select.createOption = function(optionArray) {
if(optionArray.length < 1)
return -1;
else {
for(var i=0;i<optionArray.length;i++) {
option = document.createElement("option");
option.innerHTML = option.value = optionArray;
this.appendChild(option);
option = null;
}
}
}
}
catch(e) {
alert(argsErr);
}
return select;
},
//获取输出INPUT控件对象
getOutputArea = function(id) {
//try{}catch(){}用于检查传入的ID是否存在，若不存在则进行错误提示
try{
output = document.getElementById(id);
}
catch(e) {
alert(argsErr);
}
};
window.init = init;
})();
================================================================