您的位置：首页 > 其它
省市区三级级联（mark）

2013-07-16 10:30 204 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>三级级联训练</title>
<script type="text/javascript">
//IE创建 xml dom的方法
function createIeXmlDom(){
var arr=['MSXML2.DOMDocument.6.0','MSXML2.DOMDocument.5.0','MSXML2.DOMDocument.4.0','MSXML2.DOMDocument.3.0','MSXML2.DOMDocument','Microsoft.XMLDOM'];
for(var i=0;i<arr.length;i++){
try{
//通过MSXML的版本创建DOM
return new ActiveXObject(arr[i]);
}catch(ex){
return null;
}
}
throw new Error('MSXML组件还没有安装');
}//end

function judge(){
var xmlDom;
if(window.ActiveXObject){
//ie下
xmlDom=createIeXmlDom();
}else if(document.implementation&&document.implementation.createDocument){
//支持W3C的浏览器
xmlDom=document.implementation.createDocument('','',null); //第一个指定文档的命名空间   根表签名 doc类xing
}else{
throw new Error('您的浏览器不支持');
}
return xmlDom;
}
window.onload=function(){
//创建XMLDOM
var xmldom=judge();
//同步执行方式
xmldom.async=false;
//载入xml文档
xmldom.load('city.xml');

//获取对应的标签
var showsheng=document.getElementById('sheng');
var showshi=document.getElementById('shi');
var showxian=document.getElementById('xian');
//可返回文档的根节点。
var root=xmldom.documentElement;
//获取根节点下的所有的节点
var sheng=root.childNodes;

//变量所有的省份，并添加到showsheng
for(var i=0;i<sheng.length;i++){
addOption(sheng[i],showsheng);
}

var city;
showsheng.onchange=function(){
//获取被选择省份的index下标
var index=showsheng.options.selectedIndex;
showshi.length=1;//清空原来的市区
showxian.length=1;//清空原来的县

var flag;
if(window.ActiveXObject){//ie下
city=sheng[index-1].childNodes;//获取选中的省份下面的所有子节点
for(var i=0;i<city.length;i++){
addOption(city[i],showshi);
}
}else{//w3c下

var sname=showsheng.value;
var proname;
var cities
for(i=0;i<sheng.length;i++){
if(sheng[i].nodeType==1){//是元素节点时
proname=sheng[i].getAttribute('name');;
if(sname==proname){
cities=sheng[i].childNodes;
for(var j=0;j<cities.length;j++){
if(cities[j].nodeType==1){
addOption(cities[j],showshi);
}
}
}
}
}
}
}
var xian;
showshi.onchange=function(){
var index=showshi.options.selectedIndex;
showxian.length=1;//清空原来的县

var flag;
if(window.ActiveXObject){
xian=city[index-1].childNodes;//获取选中的省份下面的所有子节点
for(var i=0;i<xian.length;i++){
addOption(xian[i],showxian);
}
}else{
var cname=showshi.value;
var xians;
var cityname;
var cities;
for(i=0;i<sheng.length;i++){
if(sheng[i].nodeType==1){
cities=sheng[i].childNodes;
for(var j=0;j<cities.length;j++){
if(cities[j].nodeType==1){
cityname=cities[j].getAttribute('name');
if(cityname==cname){
xians=cities[j].childNodes;
for(var k=0;k<xians.length;k++){
if(xians[k].nodeType==1){
addOption(xians[k],showxian);
}
}
}

}
}
}
}
}
}
}

function addOption(arrs,obj){
if(arrs.nodeType==1){
//创建元素节点
var opt=document.createElement('option');
//创建文本节点
opt.appendChild(document.createTextNode(arrs.getAttribute('name')));
opt.setAttribute('value',arrs.getAttribute('name'));
//把option附加上去
obj.appendChild(opt);
}
}

</script>
</head>

<body>
<div>
<select id="sheng" style="width:160px"><option value="0">请选择省份</option></select>省份<br />
<select id="shi" style="width:160px"><option value="0">请选择市区</option></select>市区<br />
<select id="xian" style="width:160px"><option value="0">请选择县</option></select>县<br />
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航