原生JS实现的城市三级联动

2014-11-10 00:25| 发布者: CODETC| 查看: 3460| 评论: 0

使用原生js代码实现的城市三级联动,经测试,本程序兼容各大主流浏览器,如在使用过程中发现问题,可在本文留言。
以下给出实现代码,完整程序请点击下载:JS城市三级联动(24.16k)
function Dsy(){
	this.Items = {};
}
Dsy.prototype.add = function(id,iArray){
	this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id){
	if(typeof(this.Items[id]) == "undefined") return false;
	return true;
}

function change(v){
	var str="0";
	for(i=0;i<v;i++){
		str+=("_"+(document.getElementById(s[i]).selectedIndex-1));
	};
	var ss=document.getElementById(s[v]);
	with(ss){
		length = 0;
		options[0]=new Option(opt0[v],opt0[v]);
		if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v){
			if(dsy.Exists(str)){
				ar = dsy.Items[str];
				for(i=0;i<ar.length;i++){
					options[length]=new Option(ar[i],ar[i]);
				}//end for
				if(v){ options[0].selected = true; }
			}
		}//end if v
		if(++v<s.length){change(v);}
	}//End with
}

var dsy = new Dsy();

dsy.add("0",["北京市","广东省"]);
dsy.add("0_0_0",["东城区","西城区","崇文区"]);
dsy.add("0_0",["北京市"]);
dsy.add("0_1_0",["越秀区","荔湾区","海珠区"]);
dsy.add("0_1_1",["福田区","罗湖区","南山区","宝安区"]);
dsy.add("0_1",["广州市","深圳市"]);

var s=["s_province","s_city","s_county"];//三个select的name
var opt0 = ["省份","地级市","市、县级市"];//初始值
function _init_area(){  //初始化函数
	for(i=0;i<s.length-1;i++){
	  document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
	}
	change(0);
}

文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-44-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部