下拉框联动效果

JS

window.onload = function(){
	/*
	 * 联动效果，地区数据字典
	 * 为了方便用户查阅代码，将数据属性写在此处。
	 * code代表被绑定的二级菜单标示符
	 **/
	var linkDatas = {
		provinces:[
			{
				"code":"0",
				"name":"请选择"
			},
			{
				"code":"1",
				"name":"北京"
			},
			{
				"code":"2",
				"name":"天津"
			},
			{
				"code":"3",
				"name":"河北"
			},
			{
				"code":"4",
				"name":"湖北"
			},
			{
				"code":"5",
				"name":"广东"
			},
			{
				"code":"6",
				"name":"其他"
			}
		],
		citys:{
			0:[
				"请选择"
			],
			1:[
				"朝阳区",
				"海淀区",
				"东城区",
				"西城区",
				"房山区",
				"其他"
			],
			2:[
				"天津"
			],
			3:[
				"沧州",
				"石家庄",
				"秦皇岛",
				"其他"
			],
			4:[
				"武汉市",
				"宜昌市",
				"襄樊市",
				"其他"
			],
			5:[
				"广州市",
				"深圳市",
				"汕头市",
				"佛山市",
				"珠海市",
				"其他"
			],
			6:[
				"其他"
			]
		}
	};
	function addOptions(target, optons){
		var _option = null,
				ol = optons.length,
				i = 0,
				_v = "",
				_t = "";
		for(; i < ol ; i++ ){
			_v = optons[i].value;
			_t = optons[i].text;
			_option = document.createElement("OPTION")
			_option.value = _v;
			_option.text = _t;
			target.options.add(_option);
		}

	}

	function linkage(parents, childs){//联动效果，业务处理---参数（一级菜单，二级菜单）
		var  _linkDatas = linkDatas,
				_parents = _linkDatas.provinces,
				_childs = _linkDatas.citys,
				_initCity = _childs[0],
				_p = [];
		/*初始化数据*/

		for(var i in _parents){//省
			_p.push({
				"text" : _parents[i].name,
				"value" : _parents[i].code
			});
		}

		addOptions(parents, _p);//添加选项

		addOptions(childs,[{//城市
			"value":_initCity,
			"text":_initCity
		}]);

		parents.onchange = function(){//联动事件绑定及具体业务处理
			var __childs = _childs[this.value],
					__childsLen = __childs.length,
					l = 0,
					__p = [];
			childs.innerHTML = "";
			for(; l < __childsLen ; l++){
				__p.push({
					"value" : __childs[l],
					"text" : __childs[l]
				});
			}
			addOptions(childs, __p);
		}

	}

	linkage(//绑定一级菜单与二级菜单
			document.getElementById("provinces"),
			document.getElementById("citys"));
};