现在的位置: 首页 > 综合 > 正文

省市二级联动下拉框组件封装

2013年03月17日 ⁄ 综合 ⁄ 共 1985字 ⁄ 字号 评论关闭
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
/**
 * html
 * -------------------------
 * 		行政区划代码:
 * 		<input id="xzqhcode1" size=6 readonly>
 * 		<select id="sj_select1"></select>
 * 		<select id="sx_select1"></select>
 * 
 * javascript
 * --------------------------
 * 		var s1 = new LDSelect("xzqhcode1","sj_select1","sx_select1");
 * 		s1.updateByCode(341202);
**/
var ah_sx_data={
	340000:{name:"安徽省",data:["340000:安徽省"]},
	340100:{name:"合肥市",data:["340100:合肥市","340101:市辖区","340102:瑶海区","340103:庐阳区","340104:蜀山区"]},
	340200:{name:"芜湖市",data:["340200:芜湖市","340201:市辖区","340202:镜湖区","340203:弋江区","340207:鸠江区"]},
	340300:{name:"蚌埠市",data:["340300:蚌埠市","340301:市辖区","340302:龙子湖区","340303:蚌山区","340304:禹会区"]}
}
function LDSelect(targetCode,s1,s2){
	var _get = function(id){
		return document.getElementById(id);
	};	
	var changeXJSelect=function(){
		var xj_select = _get(s2);
		_get(targetCode).value=xj_select.value;
	}
	//刷新县级下拉框
	var reBuildXJSelect=function(){
		var curr_select = _get(s1)
		var curr_id = curr_select.options[curr_select.selectedIndex].value;
		for(var sxCode in ah_sx_data){
			if(sxCode == curr_id){
				var xj_select = _get(s2);
				xj_select.options.length = 0;
				var data = ah_sx_data[sxCode].data;
				for(var i=0;i<data.length;i++){
					var sp = data[i].split(":");
					xj_select.options.add(new Option(sp[1],sp[0])); 
				}
				changeXJSelect();
				break;
			}
		}
	}
	//初始化市级下拉框
	void function(){
		var sj_select = _get(s1);
		sj_select.onchange = reBuildXJSelect;
		_get(s2).onchange = changeXJSelect;
		for(var s in ah_sx_data){
			var varItem = new Option(ah_sx_data[s].name,s); 
			sj_select.options.add(varItem); 
		}
		reBuildXJSelect();
	}();
	return{
		updateByCode:function(qxcode){
			outerfor:
			for(var s in ah_sx_data){
				var data = ah_sx_data[s].data;
				for(var i=0;i<data.length;i++){
					if(data[i].split(":")[0] == qxcode){
						_get(s1).value = s;
						reBuildXJSelect();
						break outerfor;
					}
				}
			}
			_get(s2).value = qxcode;
			_get(targetCode).value=qxcode;
		}
	}
}
window.onload=function(){
	var s1 = new LDSelect("xzqhcode1","sj_select1","sx_select1");
	s1.updateByCode(340207);
}

</script>


行政区划代码:
<input id="xzqhcode1"  size=6 readonly>
<select id="sj_select1"></select>
<select id="sx_select1"></select>

 

抱歉!评论已关闭.