完美的地址下拉层、模拟51Job

最新推荐文章于 2023-11-02 14:37:37 发布

Leolu007

最新推荐文章于 2023-11-02 14:37:37 发布

阅读量1k

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
h={
$:function(e){return document.getElementById(e)},
area:{
	北京:"东城,西城,崇文,宣武,朝阳,丰台,海淀,房山,通州,顺义,昌平,大兴,怀柔,平谷,密云,延庆,石景山,门头沟",
	上海:"黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,宝山,闵行,嘉定,松江,金山,青浦,南汇,奉贤,崇明,浦东新",
	广东:"广州,深圳,珠海,汕头,惠州,东莞,中山,佛山,湛江,云浮,从化,揭阳,梅州,肇庆,汕尾,韶关,番禺,茂名,潮阳,江门,三水,河源,高明,清远,潮州,增城,阳江,南海" ,
	天津:"天津",
　　 重庆:"黔江,重庆,万州,涪陵",
　 　河北:"石家庄,邯郸,邢台,保定,张家口,承德,唐山,秦皇岛,沧州,廊坊,衡水",
　　 山西:"太原,大同,阳泉,长治,朔州,榆次,临汾,运城,离石,晋中,忻州,晋城,吕梁",
　　 内蒙古:"呼和浩特,包头,通辽,乌兰浩特,临河,海拉尔,阿拉善左,科尔沁翼中旗,巴彦浩特,乌海,集宁,赤峰,鄂尔多斯,锡林浩特,东胜,阿拉善左旗" ,
　　 辽宁:"沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,铁岭,盘锦,葫芦岛,朝阳,锦西" ,
　　 吉林:"长春,吉林,四平,辽源,通化,延吉,珲春,梅河口,白城,白山,松源,延边,松原" ,
　　 黑龙江:"哈尔滨,齐齐哈尔,大庆,伊春,牡丹江,佳木斯,绥化,黑河,鸡西,七台河,双鸭山,鹤岗,大兴安岭" ,
　　 江苏:"南京,徐州,连云港,淮安,宿迁,盐城,扬州,南通,镇江,常州,无锡,苏州,常熟,准阴,淮阴,泰州,张家港" ,
　　 浙江:"杭州,宁波,嘉兴,湖州,绍兴,金华,衢州,舟山,温州,台州,嵊州,丽水" ,
　　 安徽:"合肥,蚌埠,马鞍山,安庆,黄山,宿州,巢湖,阜阳,毫州,铜陵,宣城,宿县,芜湖,六安,滁州,淮北,池州,淮南" ,
　　 福建:"福州,厦门,三明,莆田,泉州,漳州,南平,宁德,龙岩" ,
　　 江西:"南昌,景德镇,新余,九江,鹰潭,上饶,宜春,吉安,赣州,抚州,萍乡" ,
　　 山东:"济南,青岛,淄博,潍坊,烟台,威海,日照,德州,滨州,泰安,东营,济宁,聊城,莱芜,枣庄,临沂,菏泽,荷泽" ,
　　 河南:"郑州,开封,洛阳,新乡,濮阳,商丘,南阳,周口,鹤壁,安阳,焦作,潢川,信阳,驻马店,三门峡,许昌,漯河,平顶山,巩义" ,
　　 湖北:"武汉,襄樊,十堰,宜昌,荆门,孝感,黄岗,恩施,江汉,咸宁,天门,江陵,荆州,黄石,鄂州,随州" ,
　　 湖南:"长沙,湘潭,衡阳,岳阳,常德,郴州,益阳,怀化,张家界,邵阳,吉首,娄底,安阳,永州,自治州,株洲" ,
　　 广西:"南宁,柳州,桂林,北海,梧州,钦州,防城港,玉林,河池,防城,贵港,百色,贺州" ,
　　 海南:"海口,三亚,儋州,海南" ,
　　 四川:"成都,攀枝花,德阳,绵阳,自贡,内江,乐山,泸州,宜宾,雅安,甘孜,阿坝,康定,马尔康,涪陵,达州,西昌,遂宁,资阳,凉山,广安,广元,达川,眉山,巴中,南充" ,
　　 贵州:"贵阳,遵义,安顺,六盘水,铜仁,黔东南,兴义,凯里,毕节,黔南,都匀,黔西南" ,
　　 云南:"昆明,昭通,曲靖,思茅,丽江,楚雄,德宏,玉溪,版纳,红河,景洪,六库,文山,香格里拉,大理,保山,中甸,迪庆,潞西,个旧,迪庆州,临沧,怒江" ,
　 　西藏:"拉萨,日喀则,阿里,那曲,山南,林芝,泽当,噶尔,昌都" ,
　　 陕西:"西安,铜川,宝鸡,渭南,商州,商洛,延安,榆林,汉中,咸阳,安康" ,
　　 甘肃:"兰州,金昌,天水,平凉,临夏,白银,陇南,定西,张掖,嘉峪关,酒泉,武威,庆阳,甘南州" ,
　　 宁夏:"银川,石嘴山,银北,石咀山,银南,吴忠,固原" ,
　　 青海:"西宁,平安,格尔木,玛沁,海东,玉树,共和,海南,黄南,海北,德令哈,海西,果洛,同仁,门源,海晏" ,
　　 新疆:"乌鲁木齐,克拉玛依,吐鲁番,喀什,阿图什,库尔勒,伊犁,和田,奎屯,哈密,博乐,塔城,博州,阿克苏,阿勒泰,昌吉,伊宁,石河子,克州,咯会" ,
　　 香港:"香港" ,
　　 澳门:"澳门" ,
　　 台湾:"台北",
    其他:"其他"
},
p:function(op,oc,obj){//select province
	h.op=op;h.oc=oc;
	var i=0,shtml="";
     for (var key in h.area){
		
		shtml+="<li style='float:left;word-break:keep-all;width:100px;'><input type='radio' style='border:none' name='pro"+h.op+"' id='"+h.op+i+"' οnclick=h.c('"+key+"') value='"+key+"' /><label style='cursor:pointer' for='"+h.op+i+"'>"+key+"</label></li>";
		i++;
	 };
	h.$("pro").innerHTML=shtml;var left=parseInt(document.body.offsetWidth)-400;
	h.ss(h.$("gb"),"display:block;position:absolute;top:"+(h.gp(obj)[1]+30)+"px;left:"+left/2+"px");
},
c:function(id){//set province value
		var city=h.area[id].split(","),cs=city.length,shtml="";
		 for(var i=0;i<cs;i++){
　　　　　　　shtml+="<li style='float:left;word-break:keep-all;width:100px;'><input type='radio' style='border:none' name='cit"+h.oc+"' οnclick=h.cp('"+city[i]+"') id='"+h.oc+i+"'  value='"+city[i]+"' /><label style='cursor:pointer' for='"+h.oc+i+"'>"+city[i]+"</label></li>";
	};
	h.$("cit").innerHTML=shtml;h.$(h.op).value=id;h.$('resultp').innerHTML=" "+id;h.$('resultc').innerHTML=h.$(h.oc).value="";
},
cp:function(id){//set city value
	h.$(h.oc).value=id;h.$('resultc').innerHTML=" "+id;h.$('cnn').innerHTML='';
},
init:function(){//install
	var gv=document.createElement("div");
	gv.innerHTML="<p><b>请选择省份:</b></p><div id='pro' style='clear:both;zoom:1'></div><p><b>地区:</b></p><div id='cit' style='clear:both;zoom:1;border-top:1px solid #282c38'><p align='center'>请先选择省份</p></div><p style='border-top:1px solid #282c38;color:#f60;padding:5px 0'><b>您的选择:</b><span id='resultp'></span> <span id='resultc'></span><input type='button' value='确定' style='color:#fff;background:#2782d6' οnclick='h.remove()'/><span id='cnn' style='color:#f00;font-weight:600'></span></p>";
	gv.id="gb";h.ss(gv,"width:400px;padding:5px;display:none;background:#f7fff6;textAlign:left;border:1px solid #282c38");
	document.body.appendChild(gv);
},
ss:function(obj,s){//set style to object
            var sList = s.split(";");
            for (var i=0,j; j=sList[i]; i++){
                var k = j.split(":");
                obj.style[k[0]] = k[1];
            }
            return obj;
        },
gp: function(el) {//position
		var valueT = 0, valueL = 0;
		do {
			valueT += el.offsetTop  || 0;
			valueL += el.offsetLeft || 0;
			el = el.offsetParent;
		} while (el);
		return [valueL, valueT];
    	},
remove:function(){
		var cl=h.$('cit').childNodes.length,sw=false;
		var pv=h.$(h.op).value;
		if(h.$(h.oc+'0')==null){
			h.$('cnn').innerHTML='';
			h.$('gb').style.display='none';return true
		}
		else{
			
			for(var i=0;i<cl;i++){
			if(h.$(h.oc+i).checked==true){	sw=true;	}
		};
		}
		if(sw){
			h.$('cnn').innerHTML='';
			h.$('gb').style.display='none';
			
		}
		else{	
			h.$('cnn').innerHTML='您尚未选择地区';
			};			
		}
}
/**截取地址*/
function subPlace(){	
	var place=$("input[name='evectionPlace']").val();
	var province = place.substring(0,place.indexOf(","));
	var city = place.substring(place.indexOf(",")+1,place.length);
	if(""!=province&& ""!=city){
	$("input[name='province']").val(province);
	$("input[name='city']").val(city);
	}
	else{
	$("input[name='province']").val("");
	$("input[name='city']").val("");
	}
	}
</script>
</head>

<body οnlοad="h.init()">
<input type="text" name="province" id="province" onFocus="h.p('province','city',this)" size="10" style="cursor:pointer"/>
<input type="text" name="city" id="city" size="10"/>
</body>
</html>

Leolu007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完美的地址下拉层、模拟51Job

无标题文档h={$:function(e){return document.getElementById(e)},area:{ 北京:"东城,西城,崇文,宣武,朝阳,丰台,海淀,房山,通州,顺义,昌平,大兴,怀柔,平谷,密云,延庆,石景山,门头沟", 上海:"黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,宝山,闵行,嘉定,松江,金山,青浦,南汇,奉贤,崇明,浦东新", 广东:
复制链接

扫一扫