jquery仿51job弹出层城市选择代码



172 686 229



特效描述:弹出层 城市选择,jquery 51job城市选择

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

3. HTML代码

<!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>jquery特效</title>
<script type="text/javascript">
	var cityId = 0;	
	$(function(){
		$('.acity').click(function(){
			$('.city').show();
			$('.mask').show();
		});
		$('.cityul b').click(function(){
			var test=$(this).html();
			if($(this).attr("city") == undefined){ $(this).attr("city", window.cityId++);}
			var city = $(this).attr("city");
			if( $('input[city="'+ city +'"]').size()){
				$('input[city="'+ city +'"]').parent().remove();
			} else {
				var ml=$('.cityshow li').length;
				if(ml>4){
					alert('最多只能添加5个');
				}else{
					var test=$(this).html();
					$('<li class="licity"><input  name="citychk" type="checkbox" checked="true" city="'+ city +'" class="check"><b>'+test+'</b></li>').appendTo('.cityshow ul');
				}
			}
			$('input[name=citychk]').click(function(){
				$(this).parent('.licity').remove();
			});
		});	
		$('.ok').click(function(){
				var total="";
				if($('.cityshow ul li').text()=='')
				{
					$('.city').hide();
					$('.mask').hide();
				}else{
					$('.cityshow ul li').each(function(){
						total += (total.length > 0 ? "+" : "" ) + $(this).text();
					});
					$('.acity').text(total);
					$('.city').hide();
					$('.mask').hide();
				}
			})
	})
</script>
</head>
<BODY>
<div class="mask"></div>
<b class="acity">请选择城市</b>
<div id="wrap">
	<div class="city">
		<div class="top01-city"  >
			<em class="ok">确定</em><b >请选择工作地点(最多五项)</b>
		</div>
		<div class="mid01-city">
			<div class="cityshow" id="show">
				<i>已选地点:</i>
				<ul></ul>	
			</div>
			<div class="cityshow1" id="show1">
			<table>
			<tr><td colspan="2"><i>主要城市:</i></td></tr>
			<tr><td>
			<ul class="cityul">
			<li><strong>A</strong>
			<a ><b>鞍山</b></a>
			</li>
			<li><strong>B</strong>
				<a ><b>北京</b></a>
				<a ><b>包头</b></a>
				<a><b>保定</b></a></li>
			<li><strong>C</strong>
				<a ><b>长春</b></a>
				<a><b>长沙</b></a>
				<a><b>成都</b></a>
				<a><b>重庆</b></a>
				<a><b>常州</b></a>
				<a><b>常德</b></a>
				<a><b>常熟</b></a>
			</li>
			<li><strong>D</strong>
				<a ><b>大连</b></a>
				<a><a><b>东莞</b></a>
				<a><a><b>丹东</b></a>
				<a><a><b>大庆</b></a>
			</li>
			<li><strong>E</strong>
				<a ><b>鄂尔多斯</b></a>
			</li>
			<li><strong>F</strong>
				<a ><b>福州</b></a>
				<a><a><b>佛山</b></a>
				<a><a><b>抚顺</b></a>
			</li>
			<li><strong>G</strong>
				<a ><b>广州</b></a>
				<a><a><b>贵阳</b></a>
				<a><a><b>赣州</b></a>
			</li>
			<li><strong>H</strong>
				<a ><b>哈尔滨</b></a>
				<a><a><b>杭州</b></a>
				<a><a><b>合肥</b></a>
			     <a><b>海口</b></a>
				 <a><b>呼和浩特</b></a>
			</li>
			<li><strong>J</strong>
				<a ><b>济南</b></a>
				<a><a><b>嘉兴</b></a>
				<a><a><b>金华</b></a>
			     <a><b>吉林</b></a>
				 <a><b>江门</b></a>
				 <a><b>荆州</b></a>
			</li>
			<li><strong>K</strong>
				<a ><b>昆明</b></a>
				<a><a><b>昆山</b></a>
			</li>
			</ul>
			</td>
			<td><ul class="cityul">
			<li><strong>L</strong>
			<a ><b>兰州</b></a>
			<a ><b>廊坊</b></a>
			<a ><b>临沂</b></a>
			<a ><b>洛阳</b></a>
			<a ><b>连云港</b></a>
			<a ><b>柳州</b></a>
			</li>
			<li><strong>M</strong>
				<a ><b>绵阳</b></a>
			</li>
			<li><strong>N</strong>
				<a ><b>南京</b></a>
				<a><b>宁波</b></a>
				<a><b>南昌</b></a>
				<a><b>南通</b></a>
				<a><b>南宁</b></a>
			</li>
			<li><strong>Q</strong>
				<a ><b>青岛</b></a>
				<a><a><b>泉州</b></a>
				<a><a><b>秦皇岛</b></a>
				<a><a><b>清远</b></a>
			</li>
			<li><strong>S</strong>
				<a ><b>上海</b></a>
				<a ><b>深圳</b></a>
				<a ><b>沈阳</b></a>
				<a ><b>石家庄</b></a>
				<a ><b>苏州</b></a>
				<a ><b>三亚</b></a>
				<a ><b>绍兴</b></a>
			</li>
			<li><strong>T</strong>
				<a ><b>天津</b></a>
				<a><a><b>太原</b></a>
				<a><a><b>台州</b></a>
				<a><a><b>唐山</b></a>
				<a><a><b>泰州</b></a>
				<a><a><b>铁岭</b></a>
			</li>
			<li><strong>W</strong>
				<a ><b>武汉</b></a>
				<a><b>无锡</b></a>
				<a><b>温州</b></a>
				<a><b>乌鲁木齐</b></a>
				<a><b>芜湖</b></a>
				<a><b>潍坊</b></a>
				<a><b>威海</b></a>
			</li>
			<li><strong>X</strong>
				<a><b>西安</b></a>
				<a><b>厦门</b></a>
				<a><b>徐州</b></a>
			     <a><b>襄阳</b></a>
				 <a><b>湘潭</b></a>
				  <a><b>咸阳</b></a>
			</li>
			<li><strong>Y</strong>
				<a ><b>烟台</b></a>
				<a><a><b>扬州</b></a>
				<a><a><b>宜昌</b></a>
			     <a><b>盐城</b></a>
				 <a><b>义乌</b></a>
				 <a><b>营口</b></a>
				 <a><b>银川</b></a>
			</li>
			<li><strong>Z</strong>
				<a ><b>漳州</b></a>
				<a><b>郑州</b></a>
				<a><b>中山</b></a>
				<a><b>珠海</b></a>
				<a><b>镇江</b></a>
				<a><b>株洲</b></a>
				<a><b>湛江</b></a>
			</li>
			</ul></td>
			</tr>
	</table>
			</div>
		</div>
	</div>
</div>
<script>
</script>
<style>
a:hover{
 background-color: #ffa22e; color: #ffffff; text-decoration:none;;
}
.citychk{
 background-color: #ffa22e; color: #ffffff;
}
</style>
</BODY>
</HTML>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到