熊海斌
- 浏览: 22777 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
HTML文件：
========================================================
<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>
==========================================================
JS文件：
==========================================================
/*
*读取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;
})();
================================================================
========================================================
<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>
==========================================================
JS文件：
==========================================================
/*
*读取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;
})();
================================================================
分享到：
发表评论
-
网页技巧收集
2012-01-14 09:44 17771.文本框焦点问题onBlur:当失去输入焦点后产生该事件 ... -
JS获取系统时间进行格式化，并与其他时间进行判断
2011-11-11 14:32 28111、通过JS获取到系统时间 function getTime ... -
仿Google自动补全示例
2011-08-24 16:14 14081. 在MyEclipse中实现示例 Ø 在MyEclips ... -
JavaScript返回上一页
2011-08-22 15:04 6441. Javascript 返回上一页 history.go( ... -
JS,Jquery获取select,dropdownlist,checkbox 下拉列表框的值
2011-08-11 12:46 1188jQuery获取Select选择的Text和Value: 语法 ... -
在表格中复选框选择、选中后变色
2011-08-11 12:38 1674<style type="text/css&q ... -
JS获取传递来的参数
2011-08-10 18:09 771最近也遇到了这个问题，可是很久都没解决啊，呵呵，正好在 ...
相关推荐
本示例中的压缩包文件"layui-省市县三级联动下拉框效果.rar"正是提供了这样一个功能的实现代码。 首先，我们来理解什么是“联动下拉框”。联动下拉框是指在多个下拉菜单之间存在依赖关系，当用户在一个下拉框中选择...
在网页开发中，"js世界省洲三级下拉框联动"是一种常见的交互设计，它用于创建用户友好的选择界面，特别是在处理地理位置数据时。这种功能允许用户通过三个下拉框依次选择国家、省份（州）和城市，形成一个完整的地理...
在ASP（Active Server Pages）开发中，经常需要实现一种功能，即省市县三级联动的下拉选择框。这种功能在很多网站的地址填写或者信息录入中十分常见，它能够帮助用户方便快捷地选择所在地。标题提到的“asp省市县三...
在IT领域，"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计，尤其在网站表单中，用于用户选择地理位置时。这个技术基于AJAX（Asynchronous JavaScript and XML），它允许网页在不刷新整个页面的情况下与...
### 知识点：省市下拉框二级联动完成版（调试通过） #### 一、概述 在Web开发中，为了提供更好的用户体验与交互性，常常需要实现省市等地理位置的二级联动选择功能。所谓的“二级联动”指的是用户在选择了某个地区...
"jQuery弹出式下拉框省市区三级联动地区选择插件"就是为了满足这一需求而设计的。这个插件利用jQuery库的强大功能，实现了省市区三级联动的效果，即用户在选择省份后，下拉框会自动更新出对应省份的城市列表，进一步...
在JavaScript编程中，"省市县三级联动"是一个常见的功能需求，尤其在开发涉及地理信息的Web应用时。这种联动效果通常用于地址选择，用户在选择省份后，市、县（区）的下拉框会自动更新，显示与所选省份对应的选项。...
本主题将探讨如何利用jQuery解析XML文件，进而实现省市县三级联动的下拉框效果，这是一种常见的地理数据展示方式，常用于地址选择或者物流配送等场景。 首先，XML（Extensible Markup Language）是一种用于存储和...
本文介绍了vue + elementUI实现省市县三级联动的方法示例，分享给大家，具体如下： 1、首先需要准备省市县json文件，网上有很多可以下载。项目中使用的city.json数据是这样的格式： [ { "value": "110000", ...
在IT开发中，省市县三级联动是一种常见的功能需求，尤其在构建网站或应用程序时，用于地址选择、配送范围设定等场景。本压缩包文件提供了三种不同的实现方式：纯JavaScript、XML以及基于数据库的方法，旨在帮助...
总的来说，"基于layui开发的省市区三级联动下拉框"是一个结合了layui框架优势和前端最佳实践的示例，它展示了如何高效地构建交互式前端组件。开发者可以在此基础上进行二次开发，适应不同的应用场景，提升用户体验。
这个“jquery省市县三级联动.rar”压缩包文件提供了一个使用jQuery实现这种功能的示例。下面我们将详细探讨jQuery、省市县三级联动以及如何实现这一功能。 jQuery是一个广泛使用的JavaScript库，它简化了JavaScript...
在本篇文章中，我们要实现的是一个非常实际的应用场景，即在Django Admin中实现三级联动，具体到中国的省市区。三级联动是指在选择下级行政区划时，上一级行政区划的选择会影响到可选的下一级行政区划。例如，当我们...
以上就是使用Layui和jQuery实现省市三级联动的基本流程。实际开发中，为了提高用户体验，可能还需要添加加载动画、错误提示等功能。同时，数据获取部分通常会通过Ajax异步请求完成，以便实时更新下拉框选项。这个...
### 三级联动的省市县JSON数据解析与实现 在现代Web开发中，为了提供更加便捷、高效的用户体验，三级联动选择器被广泛应用于地址选择、地区筛选等场景中。本篇文章将详细解读“三级联动的省市县JSON数据”的原理...
这个示例代码可以帮助开发者理解如何在.NET环境中结合XML和AJAX实现前后端通信，以及如何构建一个高效、无刷新的省市县三级联动功能。对于初学者来说，这是一个很好的实践案例，有助于深入理解Web开发中的异步交互和...
在IT行业中，"省市县三级联动"是一种常见的前端交互功能，尤其在构建具有地理信息的Web应用时。这个功能主要用于用户选择地理位置时，通过省份、城市、县区的逐级下拉菜单，实现数据的联动筛选，提高用户体验并确保...
在PHP开发中，省市区三级联动...总的来说，“php-省市区三级联动”这个压缩包很可能包含了实现这一功能所需的PHP脚本、数据库结构和示例数据。开发者可以通过学习和理解这些代码，快速地在自己的项目中集成类似的功能。
"三级下拉框"是一种常见的用户界面元素，尤其在填写地址或者选择层级结构信息时非常实用。这种下拉框的设计通常包括三个关联的部分，分别对应于省、市、县（或区），当用户在一个级别选择了一个选项后，下一个级别的...
在IT领域，尤其是在网页开发中，"省市县三级联动JS与导出数据"是一个常见的需求，主要用于实现用户在选择地理位置时的交互体验。这个压缩包包含的资源可以帮助开发者快速搭建一个省市县三级联动的下拉菜单，并且提供...